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 ¹⁾.

In short, you set:

• the type (input type attribute)
• 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.

Documentation / Reference

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation