HTML Constraint Validation API html validation custom-elements Usage Interfaces ValidityState Properties validity validationMessage

The validationMessage read-only property of the HTMLObjectElement interface returns a DOMString representing a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.

willValidate

The willValidate read-only property of the HTMLObjectElement interface returns a boolean that indicates whether the element is a candidate for constraint validation.

Methods checkValidity()

Returns true if the element's value has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.

reportValidity()

Returns true if the element's value has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.

setCustomValidity()

Sets a custom error, so that the element would fail to validate. The given message is the message to be shown to the user when reporting the problem to the user. If the argument is the empty string, clears the custom error.

Events invalid

The invalid event fires when a submittable element has been checked for validity and doesn't satisfy its constraints.

CSS Selectors :enabled

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.

:disabled

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

:valid

The :valid CSS pseudo-class represents an element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

:invalid

The :invalid pseudo-class must match any element falling into one of the following categories:

Custom Elements Setup

To turn a custom element into a form-associated custom element requires a few extra steps:

Callbacks

Called when the browser associates the element with a form element, or disassociates the element from a form element

Called after the disabled state of the element changes, either because the disabled attribute of this element was added or removed; or because the disabled state changed on a >fieldset< that's an ancestor of this element. The disabled parameter represents the new disabled state of the element.

Called after the form is reset.

Called when:

Sources