ValidityState
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
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 specifiedpattern
, andfalse
if it does match. Iftrue
, 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 themax
attribute, orfalse
if it is less than or equal to the maximum. Iftrue
, 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 themin
attribute, orfalse
if it is greater than or equal to the minimum. Iftrue
, 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 thestep
attribute (that is, it's not evenly divisible by the step value), orfalse
if it does fit the step rule. Iftrue
, the element matches the:invalid
CSS pseudo-class. tooLong
Read only-
A boolean value that is
true
if the value exceeds the specifiedmaxlength
forHTMLInputElement
orHTMLTextAreaElement
objects, orfalse
if its length is less than or equal to the maximum length. Note: This property is nevertrue
in Gecko, because elements' values are prevented from being longer thanmaxlength
. Iftrue
, 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 specifiedminlength
forHTMLInputElement
orHTMLTextAreaElement
objects, orfalse
if its length is greater than or equal to the minimum length. Iftrue
, 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 (whentype
isemail
orurl
), orfalse
if the syntax is correct. Iftrue
, 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, orfalse
if it fails any constraint. Iftrue
, 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 arequired
attribute, but no value, orfalse
otherwise. Iftrue
, 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