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 の <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 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