ElementInternals: setValidity() method
======================================

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 **`setValidity()`** method of the `ElementInternals` interface sets the validity of the element.

Syntax
------


```js
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 a `required` attribute, but no value, or `false` otherwise. If `true`, the element matches the `:invalid` CSS pseudo-class.

`typeMismatch`

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.

`patternMismatch`

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.

`tooLong`

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. If `true`, 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 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.

`rangeUnderflow`

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.

`rangeOverflow`

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.

`stepMismatch`

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.

`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 a `message`.

`message` Optional

A string containing a message, which will be set if any `flags` are `true`. This parameter is only optional if all `flags` are `false`.

`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 to `true`.

`TypeError`

Thrown if one or more `flags` is `true`.

`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.


```js
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.


```js
this.internals_.setValidity({ valueMissing: true }, "my message");
```

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

| Specification |
| --- |
| HTML Standard # dom-elementinternals-setvalidity |

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

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