HTML5を使用して自動的に送信ボタンの状態を変更する方法
HTML5ではrequiredなどのvalidationが定義できるようになりました。
それを活用してJavascriptを使用して各項目をチェックする必要なくfromの状態を見て送信ボタンを自動的に有効化する方法をご紹介。
<input name="title" type="text" required>
<textarea name="body" required></textarea>
<input name="submit" type="submit" value="OK" disabled>
</form>
<script>
jQuery(function ($) {
$('form').on('input', function () {
$(this).find(':submit').attr('disabled', !this.checkValidity());
});
});
</script>
inputイベントが走る度にform.checkValidity()でチェックを行い、必須項目が入力されているなら送信ボタンを活性化させるようになっています。input・textareaなどの要素に変更があった場合、HTML5ではinputイベントが発生します。
サンプル
タイトル・本文に入力がないと送信ボタンが活性化しません。
