HTML5.1のフォーム入力チェック機能を試す
HTML5になって進化しきった訳でも、進化しなくなる訳でもありません。新しい仕様がさらに進められています。それらはHTML5.1として策定されています。
今回はそのHTML5.1の中の入力チェック機能、HTMLInputElement.reportValidityについて紹介します。
HTMLInputElement.reportValidityとは？
仕様はHTMLFormElement.reportValidity() – Web APIs | MDNにまとめられています。まだ実装されているブラウザはGoogle ChromeやFirefoxくらいになります。HTML5で新しく追加された入力属性を使って入力値の検証を行えるAPIになります。
主な入力チェック
よく使われるものとしては以下があります。
必須チェック
required 属性で指定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input name="name" type="text" required /> |
パターン
正規表現を使って入力パターンを指定します。この場合、title属性も使ってエラー時のメッセージを指定するのが良いようです。以下はごく簡単な電話番号チェック（国際電話には対応していません）です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input name="tel" type="tel" id="tel" pattern="[0-9]{2,4}-[0-9]{3,4}-[0-9]{4}" /> |
確認入力
メールアドレスやパスワードなど、確認入力を行う場合のチェックは以下のように実装します。まずHTMLにはメールアドレス入力欄が二つあったとします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 メソッドに対してメッセージを適用します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(''); | |
| } | |
| }); |
入力チェック
入力チェックは任意のタイミング（フォーカスが外れた時、フォーム送信時など）で可能ですが、例えばフォーム送信時であれば次のように実装します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var elem = document.getElementById("form"); | |
| elem.addEventListener("submit", function() { | |
| elem.reportValidity(); | |
| }); |
elem.reportValidity() が true（エラーがない）場合はフォーム送信されます。エラーがあれば送信は行われず、処理が終了します。
イベント
エラーがあった場合には該当フォームの invalid イベントが呼ばれます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var elem = document.getElementById("form"); | |
| elem.addEventListener('invalid', function() { | |
| // メッセージや処理など | |
| }, false); |
実装デモをJSFiddleにアップしてあります。実際のコード、操作について確認してください。
まだ先進的なAPIだけに、EdgeやSafariでは実装されていません。とは言え、今後サポートするブラウザが増えてくれば利用できる場面が多そうなAPIです。
hifive開発者ブログ 
コメントは受け付けていません。