What is the Native Form Validation (HTML only)?
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.