ElementInternals: validity property

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.

The validity read-only property of the ElementInternals interface returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

Value

A ValidityState object.

Exceptions

NotSupportedError DOMException

Thrown if the element does not have its formAssociated property set to true.

Examples

The following example shows a custom checkbox component with formAssociated set to true, the value of validity.valid is logged to the console.

js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }

  // …
}

window.customElements.define("custom-checkbox", CustomCheckbox);

let element = document.getElementById("custom-checkbox");
console.log(element.internals_.validity.valid);

Specifications

Specification
HTML Standard
# dom-elementinternals-validity

Browser compatibility

BCD tables only load in the browser