dom_dom0600_010

必須入力のブラウザ標準バリデーションを使うには、入力に required を付ける。JSで送信前に妥当性を確認するには、form.( A )() を呼ぶ。無効なときに送信を止めるには、if (!form.( B )()) event.preventDefault(); のように書く。

解答

A: checkValidity
B: reportValidity もしくは checkValidity(いずれも判定に使用可)

解説

checkValidity() は真偽のみ、reportValidity() はエラーメッセージ表示も行います。送信処理では妥当性が false なら preventDefault() で送信を止めます。

使用例(サンプルコード)

[ html ]

<form id="f">
  <input name="email" type="email" required>
  <button>送信</button>
</form>
<script>
  const form = document.getElementById('f');
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();     // 無効なら送信しない
      form.reportValidity();      // エラー表示
    }
  });
</script>