コンテンツへスキップ

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 属性で指定します。

<input name="name" type="text" required />

view raw
index.html
hosted with ❤ by GitHub

パターン

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

<input name="tel" type="tel" id="tel" pattern="[0-9]{2,4}-[0-9]{3,4}-[0-9]{4}" />

view raw
index.html
hosted with ❤ by GitHub

確認入力

メールアドレスやパスワードなど、確認入力を行う場合のチェックは以下のように実装します。まず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>

view raw
index.html
hosted with ❤ by GitHub

そして確認入力のメールアドレスに対する入力イベントを使って検証を行います。エラーになる場合は該当要素の 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('');
}
});

view raw
index.js
hosted with ❤ by GitHub

入力チェック

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

var elem = document.getElementById("form");
elem.addEventListener("submit", function() {
elem.reportValidity();
});

view raw
index.js
hosted with ❤ by GitHub

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

イベント

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

var elem = document.getElementById("form");
elem.addEventListener('invalid', function() {
// メッセージや処理など
}, false);

view raw
index.js
hosted with ❤ by GitHub


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

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

HTMLFormElement.reportValidity() – Web APIs | MDN

From → HTML5

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

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