ValidityState
=============

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`ValidityState`** interface represents the *validity states* that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

Instance properties
-------------------

For each of these Boolean properties, a value of `true` indicates that the specified reason validation may have failed is true, with the exception of the `valid` property, which is `true` if the element's value obeys all constraints.

`badInput` Read only 

A boolean value that is `true` if the user has provided input that the browser is unable to convert.

`customError` Read only 

A boolean value indicating whether the element's custom validity message has been set to a non-empty string by calling the element's `setCustomValidity()` method.

`patternMismatch` Read only 

A boolean value that is `true` if the value does not match the specified `pattern`, and `false` if it does match. If `true`, the element matches the `:invalid` CSS pseudo-class.

`rangeOverflow` Read only 

A boolean value that is `true` if the value is greater than the maximum specified by the `max` attribute, or `false` if it is less than or equal to the maximum. If `true`, the element matches the `:invalid` and `:out-of-range` and CSS pseudo-classes.

`rangeUnderflow` Read only 

A boolean value that is `true` if the value is less than the minimum specified by the `min` attribute, or `false` if it is greater than or equal to the minimum. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`stepMismatch` Read only 

A boolean value that is `true` if the value does not fit the rules determined by the `step` attribute (that is, it's not evenly divisible by the step value), or `false` if it does fit the step rule. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`tooLong` Read only 

A boolean value that is `true` if the value exceeds the specified `maxlength` for `HTMLInputElement` or `HTMLTextAreaElement` objects, or `false` if its length is less than or equal to the maximum length. *Note: This property is never `true` in Gecko, because elements' values are prevented from being longer than `maxlength`.* If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`tooShort` Read only 

A boolean value that is `true` if the value fails to meet the specified `minlength` for `HTMLInputElement` or `HTMLTextAreaElement` objects, or `false` if its length is greater than or equal to the minimum length. If `true`, the element matches the `:invalid` and `:out-of-range` CSS pseudo-classes.

`typeMismatch` Read only 

A boolean value that is `true` if the value is not in the required syntax (when `type` is `email` or `url`), or `false` if the syntax is correct. If `true`, the element matches the `:invalid` CSS pseudo-class.

`valid` Read only 

A boolean value that is `true` if the element meets all its validation constraints, and is therefore considered to be valid, or `false` if it fails any constraint. If `true`, the element matches the `:valid` CSS pseudo-class; the `:invalid` CSS pseudo-class otherwise.

`valueMissing` Read only 

A boolean value that is `true` if the element has a `required` attribute, but no value, or `false` otherwise. If `true`, the element matches the `:invalid` CSS pseudo-class.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-constraint-validation-api:validitystate-3 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Guide: Constraint validation
* Tutorial: Form data validation