Last Updated: December 26, 2018
·
851
· scottbartell

HTML5 constraint validation

HTML5 introduced some new mechanisms that can reduce the effort needed for client side form validations.

Two important additions to note are: new semantic types for the <input> element and constraint validation.

Constraint validation allows for native client side validation on HTML5 web forms. By setting new attributes on the <input> element, basic validations can now be performed natively by the browser without needing to write any JavaScript.

<input required type="URL">

The example above will make sure that the field isn't empty (required) and that it follows the format of a URL (type=URL).

If more complex validations are needed you can use the HTML5 Constraint Validation API.

Update:

Here's a great tutorial on constraint validation.