About
This page is about browser native form validation in HTML.
The javascript counterpart is called the constraint validation API 1).
In short, you set:
- and standard HTML attributes
that constrain the possible value of form elements.
Example
Check email
List of validation rules
Type:
- email
- url
- …
Attributes:
- required
- min
- max
- minLength
- maxLength
- pattern
- validate
Limitations
HTML validation has its limitations.
- it only works in the browser (not React Native, …)
- it's hard/impossible to show custom error messages to our user.
Function
- form.checkValidity() - Returns true if the form's controls are all valid; otherwise, returns false.
- form.reportValidity() - Returns true if the form's controls are all valid; otherwise, returns false and informs the user.
CSS
If an input is invalid, the :invalid pseudo-class is applied to the input element.