【HTML】input要素のリアルタイムバリデーションを簡単に実装する方法

問い合わせなどのWebフォームにおいて、ユーザーの入力値を検証するバリデーション機能は必須だ。

バリデーションの方法は大きく二つあり、送信ボタンが押された時に受信側プログラムで検証をおこなう方法と、フォームの入力に合わせてリアルタイムで検証をおこなう方法がある。

後者のリアルタイムバリデーションの実装は、少し前までは自分でJavaScriptのコードを書いたり、JavaScriptライブラリを利用したりと、少々面倒な作業だった。

しかし、最近このリアルタイムバリデーションを実装する機会があり、調べてみるとHTML5の機能を利用して簡単に実装できることが分かった。

今回は郵便番号の入力欄を例にとって紹介する。

input要素にpattern属性を設定する

まず、input要素に入力された値が条件にマッチするかを表すpattern属性を設定する。

pattern属性には正規表現で条件を記述し、郵便番号の場合は次のとおりとなる。

<input type="text" class="form-control input-zip" name="zip" id="zip" placeholder="例: 5770056" pattern="^[0-9]{3}-?[0-9]{4}$" title="半角数字 1234567または123-4567" required>

JavaScript側に3行のコードを追記する

HTML側の用意ができたら、以下のJavaScriptを追記する。

// リアルタイムバリデーション
$('.input-zip').on('change', function(){
  this.reportValidity();
});

input要素に対するchangeイベントを設定し、入力値に変更があった際にreportValidityメソッドを実行するコードだ。
※jQuery使用

reportValidityメソッドは入力値の検証と、エラーメッセージの表示処理を実行するもので、例えば入力欄に以下のように入力しフォーカスを外すとエラーメッセージが表示される。

補足として、エラーメッセージはデフォルトだと「指定されている形式で入力してください。」としか表示されないが、input要素にtitle属性を設定しておくと、任意のテキストを追加表示することができる。