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
# dom-elementinternals-reportvalidity

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
reportValidity

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support