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を入れる）必要があります。