reportValidityとsetCustomValidity

Constraint Validation APIには、ブラウザー組み込みのバリデーションUIを操作する2つのメソッドがあります。reportValidityはツールチップを表示し、setCustomValidityは独自のエラーメッセージを指定します。この2つを組み合わせることで、ネイティブの表示方法を維持しながらメッセージをカスタマイズできます。

checkValidity()はUIへの副作用なしにtrueまたはfalseを返します。reportValidity()も同じチェックを行いますが、さらに最初の無効なフィールドにフォーカスし、ブラウザーのバリデーションツールチップを表示します。ネイティブUXをそのまま利用したい場合はreportValidityを選びます。

複数ステップのウィザードでは、次に進む前に各ステップのフィールドをバリデーションします。if (step.reportValidity()) { next(); }のように記述します。ブラウザーがエラー表示を処理し、ユーザーは対応が必要なフィールドにフォーカスされるため、フォーカス管理を自分で再実装する必要がありません。

デフォルトメッセージ（「このフィールドに入力してください」）は、目的のトーンに合わない場合があります。input.setCustomValidity("Username is required")を使うと、デフォルトメッセージが指定したテキストに置き換わります。メッセージを消去するまで、入力項目は無効として扱われます。

input.setCustomValidity("")は独自のメッセージを削除し、通常のバリデーションを再び有効にします。再度バリデーションを行うたびに呼び出してください。そうしないと、ユーザーが問題を修正した後も古い独自メッセージが残ります。

ユーザー名の重複やクーポンの有効性など、サーバーサイドでチェックする場合は、非同期レスポンスの後にsetCustomValidityを使います。const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");のように記述します。ブラウザーは新しいvalidityの状態を直ちに反映します。

独自のエラー表示を使いながらvalidityの追跡機能も利用するには、invalidイベントを監視し、e.preventDefault()を呼び出してネイティブのツールチップを抑制します。input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); })のように記述します。

setCustomValidityで設定できる独自メッセージは、一度に1つだけです。複数のルールを適用するには、それぞれをチェックし、優先順位に従って最も関連性の高いメッセージをsetCustomValidityに渡します。最初に失敗したルールのメッセージが表示されます。

空の必須フィールドに独自メッセージを設定すると、独自のメッセージとデフォルトメッセージが競合する可能性があります。フィールドごとにどちらか一方の方法を選んでください。組み込み制約を無効にして（type="email"の代わりにtype="text"を使い、setCustomValidityでバリデーションする）、独自の方法にするか、組み込み機能だけを利用します。

パスワード確認の一致など、複数フィールドにまたがるバリデーションでは、関連するフィールドにsetCustomValidityを適用します。confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match")のように記述します。両方が一致するまでフォームは無効です。

組み込みメッセージは、ユーザーの言語に基づいてブラウザーがローカライズします。setCustomValidityで設定する独自メッセージは、自分で適切な言語にする必要があります。navigator.languageまたは独自のi18nの状態を読み取り、対応する翻訳を指定してください。

DevToolsを開き、無効になるすべての経路を試してください。空のまま送信する場合、入力が不完全な場合、形式が一致しない場合、非同期チェックに失敗する場合を確認します。正しいメッセージが表示されること、問題を修正するとメッセージが消えること、有効なフォームを送信すると処理が進むことを検証してください。無効な形式の値の貼り付けやブラウザーの自動入力などのエッジケースも、個別にテストする必要があります。

input.setCustomValidity("Already taken")を呼び出した後、入力項目が再び有効になったことをブラウザーに伝えるにはどうすればよいですか。

reportValidityはブラウザー組み込みのバリデーションUI（フォーカスとツールチップ）を表示するため、プログラムによるチェックに最適です。setCustomValidityはデフォルトメッセージを独自のテキストで上書きします。有効な状態に戻ったら空文字列で消去してください。invalidイベントをpreventDefaultとともに監視すると、エラー表示を完全に独自のものにできます。複数フィールドにまたがるバリデーション、非同期チェック、ローカライズされた独自メッセージに利用できます。