← 返回首页

HTMLInputElement: setCustomValidity() メソッド - Web API | MDN

サイドバーを切り替え

配色

OS のデフォルト
ライト
ダーク

日本語

言語を記憶もっと知る

HTMLInputElement: setCustomValidity() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

目次

構文

js

setCustomValidity(message)

引数

message

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

返値

なし (undefined)。

例外

なし。

例

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

js
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("That's too high!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

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

仕様書

仕様書

HTML
# dom-cva-setcustomvalidity

ブラウザーの互換性

ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。

関連情報

MDN の改良に協力

このページは役に立ちましたか？

はいいいえ

協力方法を知る

このページは MDN の貢献者によって 2025年4月12日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告