HTML5.1のフォーム入力チェック機能を試す
HTML5になって進化しきった訳でも、進化しなくなる訳でもありません。新しい仕様がさらに進められています。それらはHTML5.1として策定されています。
今回はそのHTML5.1の中の入力チェック機能、HTMLInputElement.reportValidityについて紹介します。
HTMLInputElement.reportValidityとは？
仕様はHTMLFormElement.reportValidity() – Web APIs | MDNにまとめられています。まだ実装されているブラウザはGoogle ChromeやFirefoxくらいになります。HTML5で新しく追加された入力属性を使って入力値の検証を行えるAPIになります。
主な入力チェック
よく使われるものとしては以下があります。
必須チェック
required 属性で指定します。
| <input name="name" type="text" required /> |
パターン
正規表現を使って入力パターンを指定します。この場合、title属性も使ってエラー時のメッセージを指定するのが良いようです。以下はごく簡単な電話番号チェック（国際電話には対応していません）です。
| <input name="tel" type="tel" id="tel" pattern="[0-9]{2,4}-[0-9]{3,4}-[0-9]{4}" /> |
確認入力
メールアドレスやパスワードなど、確認入力を行う場合のチェックは以下のように実装します。まずHTMLにはメールアドレス入力欄が二つあったとします。
| <div class="form-group"> | |
| <label for="exampleName">メールアドレス</label> | |
| <input name="email" type="email" id="email_addr" required /> | |
| <small id="emailHelp" class="form-text text-muted">必須</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleName">メールアドレス（確認）</label> | |
| <input name="email_addr_repeat" type="email" id="email_addr_repeat" required /> | |
| <small id="emailHelp" class="form-text text-muted">確認入力</small> | |
| </div> |
そして確認入力のメールアドレスに対する入力イベントを使って検証を行います。エラーになる場合は該当要素の setCustomValidity メソッドに対してメッセージを適用します。
| var mail = document.getElementById("email_addr_repeat"); | |
| mail.addEventListener("input", function() { | |
| if (this.value != document.getElementById('email_addr').value) { | |
| this.setCustomValidity('確認入力されたメールアドレスが異なります'); | |
| } else { | |
| // input is valid -- reset the error message | |
| this.setCustomValidity(''); | |
| } | |
| }); |
入力チェック
入力チェックは任意のタイミング（フォーカスが外れた時、フォーム送信時など）で可能ですが、例えばフォーム送信時であれば次のように実装します。
| var elem = document.getElementById("form"); | |
| elem.addEventListener("submit", function() { | |
| elem.reportValidity(); | |
| }); |
elem.reportValidity() が true（エラーがない）場合はフォーム送信されます。エラーがあれば送信は行われず、処理が終了します。
イベント
エラーがあった場合には該当フォームの invalid イベントが呼ばれます。
| var elem = document.getElementById("form"); | |
| elem.addEventListener('invalid', function() { | |
| // メッセージや処理など | |
| }, false); |
実装デモをJSFiddleにアップしてあります。実際のコード、操作について確認してください。
まだ先進的なAPIだけに、EdgeやSafariでは実装されていません。とは言え、今後サポートするブラウザが増えてくれば利用できる場面が多そうなAPIです。
コメントは受け付けていません。