Widely availableA strong baseline for client-side validation, especially when paired with clear UI messaging and server-side validation.

Overview

Constraint validation is the browser’s built-in form validation model. It supports required fields, ranges, patterns, validity states, and validation messages.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
4
12
4
5
18
5

The checkValidity() method of the HTMLButtonElement interface returns a boolean value which indicates if the element meets any constraint validation rules applied to it. If false, the method also fires an HTMLElement/invalid_event event on the element. Because there's no default browser behavior for checkValidity(), canceling this invalid event has no…

4
12
4
5
18
5

The reportValidity() method of the HTMLButtonElement interface performs the same validity checking steps as the HTMLButtonElement.checkValidity method. In addition, if the HTMLElement/invalid_event event is not canceled, the browser displays the problem to the user.

40
17
49
10.1
40
10.3

The setCustomValidity() method of the HTMLButtonElement interface sets the custom validity message for the button element. Use the empty string to indicate that the element does not have a custom validity error.

4
12
4
5
18
5

The validationMessage read-only property of the HTMLButtonElement interface returns a string representing a localized message that describes the validation constraints that the button control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (the 's type is button or reset), or it satisfies its…

5
12
4
5
18
4

The validity read-only property of the HTMLButtonElement interface returns a ValidityState object that represents the validity states this element is in.

4
12
4
5
18
4

The willValidate read-only property of the HTMLButtonElement interface indicates whether the button element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including:

2
12
4
4
18
3

The checkValidity() method of the HTMLFieldSetElement interface checks if the element is valid, but always returns true because fieldset elements are never candidates for constraint validation.

4
12
4
5
18
5

The reportValidity() method of the HTMLFieldSetElement interface performs the same validity checking steps as the HTMLFieldSetElement.checkValidity method. It always returns true because fieldset elements are never candidates for constraint validation.

40
17
49
10.1
40
10.3

The setCustomValidity() method of the HTMLFieldSetElement interface sets the custom validity message for the fieldset element. Use the empty string to indicate that the element does not have a custom validity error.

4
12
4
5
18
5

The validationMessage read-only property of the HTMLFieldSetElement interface returns a string representing a localized message that describes the validation constraints that the fieldset control does not satisfy (if any). This is the empty string as elements are not candidates for constraint validation (HTMLFieldSetElement.willValidate is false).

5
12
4
5
18
4

The validity read-only property of the HTMLFieldSetElement interface returns a ValidityState object that represents the validity states this element is in. Although fieldset elements are never candidates for constraint validation, the validity state may still be invalid if a custom validity message has been set.

4
12
4
5
18
4

The willValidate read-only property of the HTMLFieldSetElement interface returns false, because fieldset elements are not candidates for constraint validation.

2
12
4
4
18
3

The checkValidity() method of the HTMLFormElement interface returns a boolean value which indicates if all associated controls meet any constraint validation rules applied to them. The method also fires an HTMLElement/invalid_event event on each invalid element, but not on the form element itself. Because there's no default browser behavior for…

4
12
4
5
18
4

The reportValidity() method of the HTMLFormElement interface performs the same validity checking steps as the HTMLFormElement.checkValidity method. In addition, for each HTMLElement/invalid_event event that was fired and not canceled, the browser displays the problem to the user.

40
17
49
10.1
40
10.3

The checkValidity() method of the HTMLInputElement interface returns a boolean value which indicates if the element meets any constraint validation rules applied to it. If false, the method also fires an HTMLElement/invalid_event event on the element. Because there's no default browser behavior for checkValidity(), canceling this invalid event has no effect.

4
12
4
5
18
4

The reportValidity() method of the HTMLInputElement interface performs the same validity checking steps as the HTMLInputElement.checkValidity method. In addition, if the HTMLElement/invalid_event event is not canceled, the browser displays the problem to the user.

40
17
49
10.1
40
10.3

The HTMLInputElement.setCustomValidity() method sets a custom validity message for the element.

4
12
4
5
18
4

The validationMessage read-only property of the HTMLInputElement interface returns a string representing a localized message that describes the validation constraints that the input control does not satisfy (if any).

5
12
4
5
18
4

The validity read-only property of the HTMLInputElement interface returns a ValidityState object that represents the validity states this element is in.

4
12
4
5
18
4

The willValidate read-only property of the HTMLInputElement interface indicates whether the input element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including:

2
12
4
4
18
3

The checkValidity() method of the HTMLObjectElement interface checks if the element is valid, but always returns true because object elements are never candidates for constraint validation.

10
12
4
5.1
18
5

The reportValidity() method of the HTMLObjectElement interface performs the same validity checking steps as the HTMLObjectElement.checkValidity method. It always returns true because object elements are never candidates for constraint validation.

40
18
49
10.1
40
10.3

The setCustomValidity() method of the HTMLObjectElement interface sets a custom validity message for the element.

10
12
4
5.1
18
5

The validationMessage read-only property of the HTMLObjectElement interface returns a string 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.

10
12
4
5.1
18
5

The validity read-only property of the HTMLObjectElement interface returns a ValidityState object that represents the validity states this element is in. Although object elements are never candidates for constraint validation, the validity state may still be invalid if a custom validity message has been set.

10
12
4
5.1
18
5

The willValidate read-only property of the HTMLObjectElement interface returns false, because object elements are not candidates for constraint validation.

4
12
4
5
18
4

The checkValidity() method of the HTMLOutputElement interface checks if the element is valid, but always returns true because output elements are never candidates for constraint validation.

9
14
4
5.1
18
5

The reportValidity() method of the HTMLOutputElement interface performs the same validity checking steps as the HTMLOutputElement.checkValidity method. It always returns true because output elements are never candidates for constraint validation.

40
14
49
10.1
40
10.3

The setCustomValidity() method of the HTMLOutputElement interface sets the custom validity message for the output element. Use the empty string to indicate that the element does not have a custom validity error.

9
14
4
5.1
18
5

The validationMessage read-only property of the HTMLOutputElement interface returns a string representing a localized message that describes the validation constraints that the output control does not satisfy (if any). This is the empty string as elements are not candidates for constraint validation (HTMLOutputElement.willValidate is false).

9
14
4
5.1
18
5

The validity read-only property of the HTMLOutputElement interface returns a ValidityState object that represents the validity states this element is in. Although output elements are never candidates for constraint validation, the validity state may still be invalid if a custom validity message has been set.

9
14
4
5.1
18
5

The willValidate read-only property of the HTMLOutputElement interface returns false, because output elements are not candidates for constraint validation.

9
14
4
5.1
18
5

The checkValidity() method of the HTMLSelectElement interface returns a boolean value which indicates if the element meets any constraint validation rules applied to it. If false, the method also fires an HTMLElement/invalid_event event on the element. Because there's no default browser behavior for checkValidity(), canceling this invalid event has no…

4
12
4
5
18
4

The reportValidity() method of the HTMLSelectElement interface performs the same validity checking steps as the HTMLSelectElement.checkValidity method. In addition, if the HTMLElement/invalid_event event is not canceled, the browser displays the problem to the user.

40
17
49
10.1
40
10.3

The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

4
12
4
5
18
4

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

5
12
4
5
18
4

The validity read-only property of the HTMLSelectElement interface returns a ValidityState object that represents the validity states this element is in.

4
12
4
5
18
4

The willValidate read-only property of the HTMLSelectElement interface indicates whether the select element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, such as when its HTMLSelectElement.disabled property is true.

2
12
4
4
18
3

The checkValidity() method of the HTMLTextAreaElement interface returns a boolean value which indicates if the element meets any constraint validation rules applied to it. If false, the method also fires an HTMLElement/invalid_event event on the element. Because there's no default browser behavior for checkValidity(), canceling this invalid event has no…

4
12
4
5
18
5

The reportValidity() method of the HTMLTextAreaElement interface performs the same validity checking steps as the HTMLTextAreaElement.checkValidity method. In addition, if the HTMLElement/invalid_event event is not canceled, the browser displays the problem to the user.

40
17
49
10.1
40
10.3

The setCustomValidity() method of the HTMLTextAreaElement interface sets the custom validity message for the textarea element. Use the empty string to indicate that the element does not have a custom validity error.

4
12
4
5
18
5

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

5
12
4
5
18
5

The validity read-only property of the HTMLTextAreaElement interface returns a ValidityState object that represents the validity states this element is in.

4
12
4
5
18
5

The willValidate read-only property of the HTMLTextAreaElement interface indicates whether the textarea element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, such as when its HTMLTextAreaElement.disabled or HTMLTextAreaElement.readOnly property is true.

2
12
4
4
18
3.2

The read-only badInput property of the ValidityState interface indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.

25
12
29
7
25
7

The read-only customError property of the ValidityState interface returns true if an element doesn't meet the validation required in the custom validity set by the element's HTMLInputElement.setCustomValidity method.

4
12
4
5
18
5

The read-only patternMismatch property of the ValidityState interface indicates if the value of an input, after having been edited by the user, does not conform to the constraints set by the element's pattern attribute.

4
12
4
5
18
5

The read-only rangeOverflow property of the ValidityState interface indicates if the value of an input, after having been edited by the user, does not conform to the constraints set by the element's max attribute.

4
12
4
5
18
5

The read-only rangeUnderflow property of the ValidityState interface indicates if the value of an input, after having been edited by the user, does not conform to the constraints set by the element's min attribute.

4
12
4
5
18
5

The read-only stepMismatch property of the ValidityState interface indicates if the value of an input, after having been edited by the user, does not conform to the constraints set by the element's step attribute.

4
12
4
5
18
5

The read-only tooLong property of the ValidityState interface indicates if the value of an input or textarea, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.

4
12
4
5
18
5

The read-only tooShort property of the ValidityState interface indicates if the value of an input, button, select, output, fieldset or textarea, after having been edited by the user, is less than the minimum code-unit length established by the element's minlength attribute.

40
17
51
10
40
10

The read-only typeMismatch property of the ValidityState interface indicates if the value of an input, after having been edited by the user, does not conform to the constraints set by the element's type attribute.

4
12
4
5
18
5

The read-only valid property of the ValidityState interface indicates if the value of an input element meets all its validation constraints, and is therefore considered to be valid.

4
12
4
5
18
5

The read-only valueMissing property of the ValidityState interface indicates if a required control, such as an input, select, or textarea, has an empty value.

4
12
4
5
18
5
1+Supported (version) Not supported Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.
Notes 1 item(s)
Implementation note
  • Not supported in the unlikely case of the value being initially set too long, and then changed by the user to a still incorrect state. Per caniuse.com.
Notes 1 item(s)
Implementation note
  • Not supported in the unlikely case of the value being initially set too long, and then changed by the user to a still incorrect state. Per caniuse.com.

Syntax

JAVASCRIPT
<form>
  <input type="email" required id="email">
  <button type="submit">Send</button>
</form>
<script>
const input = document.getElementById('email');
if (!input.checkValidity()) {
  console.log('エラー:', input.validationMessage);
}
</script>

Live demo

Browserstandardvalid-tion

Required, pattern, min/max equal in forminput verification.

PreviewFullscreen

:valid /:invalid styling

CSS pseudoclass in valid-tionstate to style apply.

PreviewFullscreen

valid-tionattributeoverview

valid-tion to usable HTML attribute. and.

PreviewFullscreen

Use cases

  • Basic required-field checks

    Catch missing or malformed input before submission with native browser support.

  • Pattern and range rules

    Validate known formats or bounds without custom scripting for every field.

Cautions

  • Native validation messages and timing vary across browsers, so do not assume a fully consistent UX by default.
  • Client-side validation never replaces server-side validation and normalization.

Accessibility

  • Error messages should be visible, understandable, and programmatically associated with the relevant field.

Powered by web-features