ElementInternals: setValidity() method
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 setValidity()
method of the ElementInternals
interface sets the validity of the element.
Syntax
setValidity(flags)
setValidity(flags, message)
setValidity(flags, message, anchor)
Parameters
flags
Optional-
A dictionary object containing one or more flags indicating the validity state of the element:
valueMissing
-
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. typeMismatch
-
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. patternMismatch
-
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. tooLong
-
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. Iftrue
, the element matches the:invalid
and:out-of-range
CSS pseudo-classes. tooShort
-
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. rangeUnderflow
-
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. rangeOverflow
-
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. stepMismatch
-
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
and:out-of-range
CSS pseudo-classes. badInput
-
A boolean value that is
true
if the user has provided input that the browser is unable to convert. customError
-
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.
Note: To set all flags to
false
, indicating that this element passes all constraints validation, pass in an empty object{}
. In this case, you do not need to also pass amessage
. message
Optional-
A string containing a message, which will be set if any
flags
aretrue
. This parameter is only optional if allflags
arefalse
. anchor
Optional-
An
HTMLElement
which can be used by the user agent to report problems with this form submission.
Return value
None (undefined
).
Exceptions
NotSupportedError
DOMException
-
Thrown if the element does not have its
formAssociated
property set totrue
. TypeError
-
Thrown if one or more
flags
istrue
. NotFoundError
DOMException
-
Thrown if
anchor
is given, but the anchor is not a shadow-including descendant of the element.
Examples
In the following example setValidity
is called with an empty flags
parameter to indicate that the element meets constraint validation rules.
this.internals_.setValidity({});
In the following example setValidity
is called with the flag valueMissing
set to true
. A message
parameter must then also be passed containing a message.
this.internals_.setValidity({ valueMissing: true }, "my message");
Specifications
Specification |
---|
HTML Standard # dom-elementinternals-setvalidity |
Browser compatibility
BCD tables only load in the browser