ElementInternals: reportValidity() メソッド

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

reportValidity()ElementInternals インターフェイスのメソッドで、適用された制約検証ルールをこの要素が満たしているかどうかをチェックします。

reportValidityfalse を返した場合、キャンセル可能な invalid イベントが要素で発生します。

このメソッドは ElementInternals.checkValidity() と同様の振る舞いをしますが、 ElementInternals.validationMessage の値をユーザーエージェントに送信して表示させます。

構文

js
reportValidity()

引数

なし。

返値

論理値で、要素がすべての検証される制約に合格していれば true を返します。

例外

NotSupportedError DOMException

要素の formAssociated プロパティが true に設定されていない場合に発生します。

以下の例では、 ElementInternals.setValidity() を使用して、要素が検証ルールを満たしていないことを示します。 reportValidity() を呼び出すと false が返され、 "メッセージ" という値がユーザーエージェントに送られ、表示されます。

再度 setValidity を呼び出し、今度はすべてのルールが false になっていることを示すと、reportValidity()true を返します。

js
let element = document.getElementById("join-checkbox");
element.internals_.setValidity({ valueMissing: true }, "メッセージ");
console.log(element.internals_.reportValidity()); // false
element.internals_.setValidity({});
console.log(element.internals_.reportValidity()); // true

仕様書

Specification
HTML Standard
# dom-elementinternals-reportvalidity

ブラウザーの互換性

BCD tables only load in the browser