【HTML】【JavaScript】ブラウザ組み込み機能でバリデーションをする

　フォームのバリデーション（入力値の検証）には色々な方法があります。この記事では簡易にできるブラウザ組み込みのHTMLのバリデーションとJavaScript上からそのバリデーションを動かすコードを紹介します。

　HTML5ではrequired、type="email"、minlength、maxlength、patternなど、いくつかの属性を付けるだけで入力チェックが自動的に実行されます。これは例えば次のようにできます。

<form>
  <label>名前（必須・2文字以上）:
    <input type="text" name="name" required minlength="2">
  </label><br>

  <label>メールアドレス（必須・形式チェック）:
    <input type="email" name="email" required>
  </label><br>

  <button type="submit">送信</button>
</form>

　これだけで入力が空だったりメールアドレスが正しい形式でない場合には送信できません。ブラウザが自動でエラーメッセージを出してくれます。

　ブラウザの自動バリデーションはsubmit時に効きますが、JavaScriptで明示的にバリデーションをチェック・制御することも可能です。これにより例えば「バリデーションが通ったら非同期でサーバーに送信する」などが実現できます。これは例えば次のようにできます。

<form id="userForm">
  <input type="text" name="name" required minlength="2" placeholder="名前">
  <input type="email" name="email" required placeholder="メールアドレス">
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('userForm').addEventListener('submit', function (e) {
  // checkValidityはブラウザのバリデーションを実行してOKかNGかを返してくれます
  if (!this.checkValidity()) {
    // reportValidityはバリデーションのエラーメッセージを表示してくれます
    this.reportValidity();
    e.preventDefault(); // 送信阻止
    return;
  }

  // バリデーションOKなら送信を進める
  console.log('バリデーションOK、送信処理を実行');
});
</script>

HTMLInputElement： checkValidity() メソッド – Web API ｜ MDN
HTMLInputElement： reportValidity() メソッド – Web API ｜ MDN

　checkValidityメソッド、reportValidityメソッドは例のコードのようにフォーム全体のバリデーションをまとめて実行できます。

　組み込みのエラーメッセージはおおむね適切なのですが独自メッセージを出したいケースもあります。その場合はsetCustomValidityメソッドを使うとメッセージを上書きできます。これは次のように書けます。

const input = document.querySelector('input[name="name"]');
input.addEventListener('input', () => {
  if (input.value.length < 2) {
    input.setCustomValidity('名前は2文字以上で入力してください');
  } else {
    input.setCustomValidity('');
  }
});

　こんな感じで条件分岐によってメッセージを変えると便利です。

　このHTMLのバリデーション機能を使う利点はとにかく手軽さです。ライブラリ等を用いたスクラッチに近いバリデーションの方が細やかですが、HTMLバリデーションはパッとDOMの属性にバリデーションを書けば概ね動きます。