コンテンツへ移動

HTML5.1のフォーム入力チェック機能を試す

by : 2018/03/16

HTML5になって進化しきった訳でも、進化しなくなる訳でもありません。新しい仕様がさらに進められています。それらはHTML5.1として策定されています。

今回はそのHTML5.1の中の入力チェック機能、HTMLInputElement.reportValidityについて紹介します。

HTMLInputElement.reportValidityとは?

仕様はHTMLFormElement.reportValidity() – Web APIs | MDNにまとめられています。まだ実装されているブラウザはGoogle ChromeやFirefoxくらいになります。HTML5で新しく追加された入力属性を使って入力値の検証を行えるAPIになります。

主な入力チェック

よく使われるものとしては以下があります。

必須チェック

required 属性で指定します。

パターン

正規表現を使って入力パターンを指定します。この場合、title属性も使ってエラー時のメッセージを指定するのが良いようです。以下はごく簡単な電話番号チェック(国際電話には対応していません)です。

確認入力

メールアドレスやパスワードなど、確認入力を行う場合のチェックは以下のように実装します。まずHTMLにはメールアドレス入力欄が二つあったとします。

そして確認入力のメールアドレスに対する入力イベントを使って検証を行います。エラーになる場合は該当要素の setCustomValidity メソッドに対してメッセージを適用します。

入力チェック

入力チェックは任意のタイミング(フォーカスが外れた時、フォーム送信時など)で可能ですが、例えばフォーム送信時であれば次のように実装します。

elem.reportValidity() が true(エラーがない)場合はフォーム送信されます。エラーがあれば送信は行われず、処理が終了します。

イベント

エラーがあった場合には該当フォームの invalid イベントが呼ばれます。


実装デモをJSFiddleにアップしてあります。実際のコード、操作について確認してください。

まだ先進的なAPIだけに、EdgeやSafariでは実装されていません。とは言え、今後サポートするブラウザが増えてくれば利用できる場面が多そうなAPIです。

HTMLFormElement.reportValidity() – Web APIs | MDN

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。