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 つのボタンを設置したフォームを設置します。

html

<form action="#" method="post">  <p>    <label for="age">年齢 (21 ～ 65) </label>    <input type="number" name="age" required min="21" max="65" />  </p>  <p>    <button type="submit">送信</button>    <button type="button">checkValidity()</button>  </p>  <p></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} を返しました。`;});