required、pattern、inputmode、そしてConstraint Validation APIを活用し、外部ライブラリなしで堅牢なフォームを作ります。
このレッスンを Kodokon で開くブラウザには完全なバリデーションエンジンが備わっているのに、多くのチームが習慣でそれをJavaScriptで再実装しています。構成要素はこうです: required(必須フィールド)、形式を検証する型(email、url、date)、minlength/maxlength、数値のための min/max/step、そして正規表現を受け取る pattern。重要な点: pattern は暗黙的にアンカーされます。正規表現が ^ と $ で囲まれているかのように、値全体が一致しなければなりません。標準化された値(postal-code、email、tel)を使って autocomplete を付け加えましょう。これはUXでもありアクセシビリティでもあります。
<label for="zip">Postal code</label>
<input id="zip" name="zip" type="text"
required pattern="[0-9]{5}"
inputmode="numeric"
autocomplete="postal-code">inputmode 属性はしばしば誤解されています。これは何も検証しません。モバイルのシステムに、どの仮想キーボードを表示するか(numeric、tel、email、decimal、search)を伝えるだけです。だからこそ type="text" + inputmode="numeric" + pattern の組み合わせが、数字コードに推奨されるパターンなのです。type="number" の挙動を引き継ぐことなく、適切なキーボードが得られます。
input:user-invalid {
border: 2px solid #b3261e;
}
input:user-valid {
border: 2px solid #1b5e20;
}CSS側では、:invalid よりも :user-invalid を優先しましょう。前者はページの読み込みと同時に適用され、ユーザーがまだ触れてもいないフィールドを赤く塗ってしまいます。JavaScript側では、Constraint Validation APIが道具立てを仕上げます。checkValidity() がチェックを起動し、validity オブジェクトが正確な原因(patternMismatch、valueMissing、tooShort)を明らかにし、setCustomValidity() を使えばブラウザの一般的なメッセージを自分のものに置き換えられます。
const zip = document.querySelector("#zip");
zip.addEventListener("input", () => {
if (zip.validity.patternMismatch) {
zip.setCustomValidity("Enter 5 digits.");
} else {
zip.setCustomValidity("");
}
});