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にしたら減色処理が結構酷いですね…
説明
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イベントを利用する方が良いでしょう。