HTML5のValidationでsubmitボタンの状態を変更する

HTML5のvalidationを使い、form.checkValidity() の結果を見てsubmitボタンの状態を変更します。

サンプルコード

title用のinput要素にrequired属性を付けています。これでtitleが未入力の場合は form.checkValidity() がfalseを返すようになるため、入力があるたびにこの結果を確認し、未入力の場合はsubmitボタンを押せないようにします。

```html

```

デモ

デモ用にGitHubっぽい見た目のやつを作ってみました。GIFにしたら減色処理が結構酷いですね…

demo.gif

説明

checkValidity()

HTML5では、フォームの各要素に required などのvalidationが定義できるようになりました。同時に、form・input・textarea・selectの要素に checkValidity() というプロパティが定義されています。この関数は、input・textarea・selectではその要素がvalidかどうかによってtrue/falseを返し、formでは含まれる全ての要素がvalidかどうかによってtrue/falseを返します。

input event

input・textareaなどの要素に変更があった場合、HTML5ではinputイベントが発生します。モバイルデバイスなどへの対応を考えると、今回の目的ではkeyupなどのイベントよりはinputイベントを利用する方が良いでしょう。

参考 :link: