HTMLInputElement.setCustomValidity()

HTMLInputElement.setCustomValidity() メソッドは、その要素にカスタム検証メッセージを設定します。

構文

element.setCustomValidity(message);

引数

message

検証エラーに使用するメッセージです。

返値

undefined

例外

なし。

例

この例では、 input 要素の ID を渡し、値が不足しているか、低すぎるか、高すぎるかによって、異なるエラーメッセージを設定します。さらに、同じ要素で reportValidity() メソッドを呼び出す必要があります。そうしないと何も起こりません。

function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity('You gotta fill this out, yo!');
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity('We need a higher number!');
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity('Thats too high!');
  } else {
    input.setCustomValidity('');
  }

  input.reportValidity();
}

エラーがない場合は、メッセージを空文字列に設定することが重要です。エラーメッセージが空でない限り、フォームは検証を通過せず、送信されません。

仕様書

Specification
HTML Standard
# dom-cva-setcustomvalidity-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報