HTML5になってフォームバリデーションも強化されていますが、さらにJavaScriptやCSSなどから使うこともできます。

ご注意

ブラウザサイドのバリデーションは「ブラウザごとに対応・非対応がありうる」ということや「ユーザーレベルで書き換えが可能」ということもあるので、あくまで「サーバ送信せずにエラーをユーザーに伝えられる」、入力補助の機能と考えてください。サーバサイドのバリデーションに代わるものではありません。

HTMLサイド

制約のかかる<input type>

HTML5では指定できる<input>のtypeも増えましたが、ものによっては指定できる値が決まっている（さらには、専用の入力フォームが用意される）ものがあります。

• color…#abcdef形式での色指定
• date…日付
• datetime-local…日時
• email…メールアドレス
• month…年月
• number…数値
• range…スライダーで目分量指定する値
• time…時間
• url…URL
• week…週

専用のフォームが出てくるタイプではバリデーション以前に不適当な値の入力すらできませんが、emailやurlはフリー入力なので不適当な入力も可能となってしまいます。

バリデーション属性

textを筆頭として、入力フォームに特定の値を入力させるためのバリデーションをかけることができます。

• required…入力を必須にする
• pattern…入力パターンの指定（textなど自由に入力できる系のみ）
• maxlength…最長の長さの指定（自由に入力できる系のみ）
• minlength…最短の長さの指定（自由に入力できる系のみ）
• max…最大値（数値や日付系のみ）
• min…最小値（数値や日付系のみ）
• step…値の刻み（数値や日付系のみ）

これらのバリデーションに引っかかった場合、フォームのsubmitは失敗します。ただし、iOS 10.2以下では、バリデーション自体は働くものの、送信が止まらないので要注意です。

CSS

バリデーションと関連したCSSセレクタが4つあります。

• :required…入力必須の入力要素にかかる
• :optional…入力必須でない入力要素にかかる
• :valid…バリデーションをクリアした入力要素にかかる
• :invalid…バリデーションに失敗した入力要素にかかる

これらを使うことで、入力状況によってスタイルを変えることができます。

JavaScript

セレクタ

上で書いたCSSセレクタを、JavaScriptからも使って、たとえば:invalidなフォーム要素をかき集める、というようなことができます。ただし、このセレクタはjQueryでは正式サポートしていないので要注意です。ネイティブなquerySelectorAllなどを使いましょう。

メソッド

<input>や<form>にある.checkValidity()を呼び出すと、手動でバリデーションを回すことができます。また、setCustomValidityで、JavaScriptからフォームをinvalidにしてしまうことができます。

イベント

バリデーションに失敗した入力フォームは、invalidイベントを起こします。ただ、このイベントはバブリングしないので、「フォームでまとめて取りたい」ような場合には、キャプチャを使う（formElement.addEventListener('invalid', function(){...}, true);と第3引数にtrueを入れる）必要があります。