Constraint Validation API
組み込みの妥当性チェックを使います。
「Constraint Validation API」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
組み込みバリデーション
HTMLのフォームフィールドでは、required、min、max、pattern、type="email"などの属性をサポートしています。Constraint Validation APIを使うと、JavaScriptからこの組み込みバリデーションを検査・制御できます。
checkValidity
checkValidityはブール値を返し、ブラウザーの吹き出しを表示せずに、条件を満たさない各コントロールでinvalidイベントを発生させます。
const email = document.querySelector("#email");
console.log(email.checkValidity());reportValidity
reportValidityはcheckValidityと同様ですが、無効なフィールドに対してブラウザーのバリデーションメッセージUIも表示します。
if (!form.reportValidity()) {
console.log("show built-in errors");
}validityオブジェクト
各コントロールには、何が問題なのかを正確に示すブール値のフラグを持つvalidityオブジェクトがあります。
console.log(email.validity.valueMissing); // empty required
console.log(email.validity.typeMismatch); // wrong format
console.log(email.validity.tooShort);validity.valid
validity.validは、フィールドがすべての制約を満たしている場合にのみtrueになります。他のフラグをまとめた値です。
if (email.validity.valid) {
console.log("ok");
}validationMessage
validationMessageには、現在のエラーに対してブラウザーが表示するローカライズ済みのメッセージが格納されます。
console.log(email.validationMessage);setCustomValidity
setCustomValidityを使うと、独自のメッセージでフィールドを無効にできます。空でない文字列は無効を意味し、空の文字列で無効状態を解除します。
function checkMatch() {
if (pass.value !== confirm.value) {
confirm.setCustomValidity("Passwords must match");
} else {
confirm.setCustomValidity("");
}
}カスタムエラーは必ず消去する
カスタムメッセージを設定した場合は、有効になった時点で空の文字列を設定して消去する必要があります。消去しないと、フィールドは無効なままになります。
confirm.addEventListener("input", () => {
confirm.setCustomValidity("");
checkMatch();
});invalidイベント
バリデーションに失敗したときにフィールドのスタイルを変更するなど、独自の処理を行うにはinvalidイベントを監視します。
email.addEventListener("invalid", () => {
email.classList.add("error");
});ネイティブの吹き出しを無効にする
フォームにnovalidateを追加すると、独自のメッセージにAPIを使いながら、ネイティブのポップアップを抑制できます。
form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
if (!form.checkValidity()) e.preventDefault();
});:validと:invalidによるスタイル設定
CSSの擬似クラス:validと:invalidを使うと、フィールドの有効状態に応じて自動的にスタイルを設定できます。
クイックチェック
カスタムバリデーションルールを選んでください。
まとめ
Constraint Validation APIは、HTMLの制約属性と連携して動作します。checkValidity/reportValidityでエラーを検査し、必要に応じて表示します。validityのフラグとvalidationMessageを調べ、setCustomValidityで独自のルールを追加します（空の文字列で解除します）。invalidイベントと:valid/:invalid CSSは、スタイル設定に役立ちます。
よくある質問
「Constraint Validation API」レッスンは無料ですか？
はい。「Constraint Validation API」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Constraint Validation API」で何を学びますか？
組み込みの妥当性チェックを使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Constraint Validation API」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 入力値を読み取る
- submit イベント
- クライアントサイドバリデーション
- Constraint Validation API