HTMLInputElement: checkValidity() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
checkValidity()
は HTMLInputElement
インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で invalid
イベントも発行します。checkValidity()
には既定でブラウザーの動作が設定されていないため、この invalid
イベントをキャンセルしても効果はありません。
メモ:
HTML の <select>
要素で、validationMessage
が null 以外の値を持つものは不正なものと見なされ、CSS の :invalid
擬似クラスに一致し、checkValidity()
が false を返すようになります。 HTMLInputElement.setCustomValidity()
メソッドを使用して、HTMLInputElement.validationMessage
を空文字列に設定すると、validity
状態が妥当となります。
構文
checkValidity()
引数
なし。
返値
要素の値に妥当性の問題がなければ true
を返し、そうでなければ false
を返します。
例
HTML
必須の数値フィールドと、フォームのチェックボタンと送信ボタンの 2 つのボタンを設置したフォームを設置します。
<form action="#" method="post">
<p>
<label for="age">年齢 (21 ~ 65) </label>
<input type="number" name="age" required id="age" min="21" max="65" />
</p>
<p>
<button type="submit">送信</button>
<button type="button" id="check">checkValidity()</button>
</p>
<p id="log"></p>
</form>
JavaScript
const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");
ageInput.addEventListener("invalid", () => {
console.log("invalid イベントが発行されました。");
});
checkButton.addEventListener("click", () => {
const checkVal = ageInput.checkValidity();
output.innerHTML = `checkValidity が ${checkVal} を返しました。`;
});
結果
false
の場合、値が未入力、21 未満、65 超、または無効な場合、invalid イベントがコンソールに記録されます。ユーザーにエラーを報告するには、代わりに HTMLInputElement.reportValidity()
を使用してください。
仕様書
Specification |
---|
HTML Standard # dom-cva-checkvalidity-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
HTMLInputElement.reportValidity()
<input>
<form>
- 学習: クライアント側フォーム検証
- ガイド: 制約検証
- CSS の
:valid
および:invalid
擬似クラス