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 インターフェイスのメソッドで、適用された制約検証ルールをこの要素が満たしているかどうかをチェックします。

reportValidity が false を返した場合、キャンセル可能な 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