Constraint Validation API
JavaScriptで妥当性の状態を読み取り、制約を確認します
「Constraint Validation API」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
JavaScriptなしのバリデーション
HTML5では、属性による組み込みフォームバリデーションが導入されました。属性には、required、type="email"、type="number"、min、max、pattern、minlength、maxlengthがあります。ブラウザーは送信時に自動でバリデーションを行い、エラーメッセージを表示します。JSは必要ありません。
<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>CSSのバリデーションセレクター
:invalidはバリデーションに失敗した入力項目に一致し、:validはバリデーションに合格した入力項目に一致します。:user-invalid（最新のブラウザーで利用可能）は、ユーザーが操作した後の入力項目にのみ一致するため、未操作のフォームに赤い枠が表示されるのを防げます。これらの疑似クラスでエラーをスタイル設定します。
input:user-invalid {
border-color: red;
}
input:user-invalid + .error {
display: block;
}ValidityStateオブジェクト
すべてのフォームコントロールにはvalidityプロパティが公開されています。これは、valid、valueMissing、typeMismatch、patternMismatch、rangeUnderflow、tooShortなどのブール値フラグを持つValidityStateオブジェクトです。どのエラーを表示するかを判断するために調べます。
const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
showError(input, "Please enter a valid email address");
}checkValidityメソッド
input.checkValidity()は、値がすべての制約を満たしていればtrueを、それ以外の場合はfalseを返します。form.checkValidity()はフォーム全体をチェックします。AJAXを実行する前や、ウィザードでユーザーが次のステップに進むことを許可する前のプログラムによるチェックに便利です。
reportValidityメソッド
input.reportValidity()はcheckValidityと同様に動作しますが、ブラウザー組み込みのツールチップを表示し、最初の無効なフィールドにフォーカスする点が異なります。ネイティブUIをそのまま利用したい場合はこれを使い、エラー表示を完全にカスタマイズしたい場合はcheckValidityを使います。
組み込みメッセージのカスタマイズ
ブラウザーのデフォルトメッセージ（「このフィールドに入力してください」）は、目的のトーンや言語に合わない場合があります。input.setCustomValidity("Enter a valid coupon code")で上書きできます。setCustomValidity("")でメッセージを消去するまで、入力項目は無効な状態になります。
novalidateでブラウザーUIを無効化
フォームにnovalidateを追加すると、ブラウザーのデフォルトのバリデーション動作を抑制できます。エラー表示をすべて独自に実装する場合に便利です。ただし、バリデーションに合格するはずだったかどうかにかかわらずフォームは送信されるため、送信前にプログラムでチェックしてください。
invalidイベントの監視
各コントロールは、バリデーションに失敗するとinvalidイベントを発生させます。これを監視してデフォルトのツールチップを抑制し、独自のメッセージを表示できます。input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); })のように記述します。
正規表現によるpattern
pattern属性には、値全体が一致する必要のあるJavaScript正規表現を指定します（^と$のアンカーは暗黙的に適用されるため、指定する必要はありません）。ユーザーに期待される形式を説明するには、title属性と組み合わせます。
サーバーサイドのバリデーションも必須
HTMLバリデーションはユーザーの利便性のためのものです。DOMを編集すれば誰でも回避できます。必ずサーバーでも再度バリデーションを行ってください。HTMLの制約はセキュリティのためではなく、UX（即時のフィードバックや往復通信の削減）のために存在します。
複数の制約の組み合わせ
制約は積み重ねて適用されます。<input type="number" min="18" max="120" required step="1">は、値が入力され、整数であり、18以上120以下でなければなりません。ブラウザーはValidityStateのフラグを通じて、どの制約に失敗したかを公開するため、適切なメッセージを表示できます。
理解度チェック
:user-invalid CSS疑似クラスは、:invalidとどのように異なりますか。
まとめ
ネイティブのバリデーション属性（required、type、pattern、min、max）とValidityState APIを使うと、デフォルトではJSなしで強力なクライアントサイドバリデーションを実現できます。CSSの:user-invalidは、ユーザーが操作した後にエラーをスタイル設定します。checkValidity/reportValidityでプログラムによるチェックを実行できます。setCustomValidityでデフォルトメッセージを上書きできます。必ずサーバーでも再度バリデーションを行ってください。
よくある質問
「Constraint Validation API」レッスンは無料ですか？
はい。「Constraint Validation API」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「Constraint Validation API」で何を学びますか？
JavaScriptで妥当性の状態を読み取り、制約を確認します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Constraint Validation API」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- FormData API
- Constraint Validation API
- reportValidityとsetCustomValidity
- フォームリセットイベントと状態管理