HTMLObjectElement: setCustomValidity() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
setCustomValidity() は HTMLObjectElement インターフェイスのメソッドで、この要素に独自の検証メッセージを設定します。
構文
js
setCustomValidity(errorMessage) 引数
errorMessage-
検証エラーに使用するメッセージです。
返値
なし (undefined)。
例外
なし。
例
この例では、 input 要素の ID を渡し、値が不足しているか、低すぎるか、高すぎるかによって、異なるエラーメッセージを設定します。さらに、同じ要素で reportValidity メソッドを呼び出す必要があり、さもなければ何も起こりません。
js
function validate(inputID) { const input = document.getElementById(inputID); const validityState = input.validity; if (validityState.valueMissing) { input.setCustomValidity("ここに記入するんだ！"); } else if (validityState.rangeUnderflow) { input.setCustomValidity("もっと高い数字が必要だ!"); } else if (validityState.rangeOverflow) { input.setCustomValidity("高すぎる!"); } else { input.setCustomValidity(""); } input.reportValidity(); } エラーがない場合は、メッセージを空文字列に設定することが重要です。エラーメッセージが空でない限り、フォームは検証を通らず、送信されません。
仕様書
| Specification |
|---|
| HTML # dom-cva-setcustomvalidity-dev |