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

js
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} を返しました。`;
});

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年4月12日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: checkValidity() メソッド

In this article

構文

引数

返値

例

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN