dom_dom0900_009

バリデーション付きフォームで、HTML標準の制約検証APIを使って送信前にエラー表示を行う正しい手順はどれですか？

  1. 送信ボタンのtypeをbuttonにして何もしない
  2. form.checkValidity()で判定し、reportValidity()またはカスタムメッセージを表示する
  3. alert(“OK”)だけ出す
  4. サーバーからのエラーのみを待つ
正解
  1. form.checkValidity()で判定し、reportValidity()またはカスタムメッセージを表示する
解説

ネイティブの制約検証API（required, pattern, minlength等）を利用し、checkValidity()で真偽を取り、必要ならreportValidity()やsetCustomValidity()でユーザーにフィードバックします。

使用例（サンプルコード）

[ html ]

<form id="f">
  <input name="email" type="email" required>
  <button>Send</button>
</form>
<script>
const form = document.getElementById('f');
form.addEventListener('submit', (e)=>{
  if (!form.checkValidity()) {
    e.preventDefault();
    form.reportValidity();
  }
});
</script>