HTML Academy · レッスン

Constraint Validation APIの基礎

Q: 「Constraint Validation APIの基礎」で何を学びますか？

Constraint Validation APIで妥当性の状態とカスタムメッセージを読み取ります ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Constraint Validation APIで妥当性の状態とカスタムメッセージを読み取ります

「Constraint Validation APIの基礎」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

Constraint Validation APIとは

Constraint Validation APIは、フォームのバリデーション状態を読み取ったり設定したりするためのJavaScriptインターフェースです。

フィールドが有効かどうかを確認する
どの制約に違反したかを読み取る
カスタムエラーメッセージを設定する
ブラウザーのバリデーションUIをプログラムから起動する

validityプロパティ

すべてのフォームコントロールには、特定の条件を示す真偽値フラグを持つvalidityオブジェクトがあります。

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

checkValidityメソッド

checkValidity()はtrueまたはfalseを返し、invalidイベントを発生させます。

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

reportValidityメソッド

reportValidity()は、ブラウザー標準のバリデーションUIを表示します。

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

validationMessageプロパティ

validationMessageは、ブラウザーのエラーメッセージ文字列を返します。

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message)は、カスタムバリデーションエラーを設定します。

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

カスタムバリデーション状態の解除

ユーザーが問題を修正したら、カスタムバリデーション状態を解除する必要があります。

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

invalidイベント

バリデーションに失敗したフォームコントロールで、invalidイベントが発生します。

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

will-validateプロパティ

要素が制約バリデーションの対象になる場合、willValidateはtrueになります。

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

カスタムバリデーションでValidityを使う

カスタムバリデーションの完全な例です。

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

ValidityStateフラグのまとめ

ValidityStateのすべてのフラグ：

valueMissing — 必須なのに空である
typeMismatch — 形式が型に合っていない
patternMismatch — パターンの正規表現に一致しない
tooShort / tooLong — minlength/maxlengthの制約に違反している
rangeUnderflow / rangeOverflow — min/maxの範囲外である
stepMismatch — 有効なstep値ではない
customError — setCustomValidityでメッセージが設定されている
badInput — ブラウザーが値を解析できない

クイックチェック

ブラウザー標準のバリデーションエラーのポップアップをプログラムから表示するには、どうすればよいですか？

振り返り：Constraint Validation API

Constraint Validation APIの要点：

input.validity — 特定のフラグを持つValidityStateオブジェクト
checkValidity() — trueまたはfalseを返し、invalidイベントを発生させる
reportValidity() — 検証して、標準のエラーUIを表示する
validationMessage — ブラウザーのエラー文字列
setCustomValidity(msg) — カスタムエラーを設定する。空文字列で解除する

よくある質問

「Constraint Validation APIの基礎」レッスンは無料ですか？

はい。「Constraint Validation APIの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「Constraint Validation APIの基礎」で何を学びますか？

Constraint Validation APIで妥当性の状態とカスタムメッセージを読み取りますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Constraint Validation APIの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る