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 2015年7月.
checkValidity() は HTMLInputElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で invalid イベントも発行します。checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。
メモ:
HTML の <input> 要素で、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 # dom-cva-checkvalidity-dev |
ブラウザーの互換性
Loading…
関連情報
HTMLInputElement.reportValidity()<input><form>- 学習: クライアント側フォーム検証
- ガイド: 制約検証
- CSS の
:validおよび:invalid擬似クラス