HTMLは組み込み検証を属性で提供するため、ブラウザは無効な送信をブロックしてメッセージを表示します — JavaScriptは必要ありません。
html
Submit
HTMLは組み込み検証を属性で提供するため、ブラウザは無効な送信をブロックしてメッセージを表示します — JavaScriptは必要ありません。
Submit
検証属性: required、min/max、minlength/maxlength、pattern (正規表現)、およびtype自体 (email、url、number)です。送信時、ブラウザがそれらをチェックし、いずれか失敗した場合は送信を停止し、最初の無効なフィールドにネイティブバブルを表示します。
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
JavaScriptで検証を読み取りおよびカスタマイズできます:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidityを使うと、属性では表現できないルールを追加できます (例: "パスワード確認が一致する")。
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
常にサーバーでも検証してください — クライアント検証はUX用です; ユーザーはそれを回避できます。
ネイティブ検証は、アクセス可能でローカライズされたエラーメッセージと即座のフィードバックを無料で提供します。
宣言的属性とConstraint Validation APIをカスタムルールと組み合わせてください — ただし、これを唯一の防御手段として信頼しないでください; サーバーも同様に検証する必要があります。