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

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

サンプルコード

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

<form action="/posts" method="post" data-validate>
  <input name="title" type="text" required>
  <textarea name="body"></textarea>
  <input name="commit" type="submit" value="OK" disabled>
</form>

<script>
  jQuery(function ($) {
    $('form[data-validate]').on('input', function () {
      $(this).find(':submit').attr('disabled', !this.checkValidity());
    });
  });
</script>

デモ

デモ用に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: