HTML5 Form Validation Examples

For an old days we used JavaScript validation to validate any form in a website and this was until recently unthinkable. But as soon as the HTML5 came then the validation becomes very easy to maintain in any form.

Here is some example of HTML5 Form Validation:

The ‘required’ attribute
This simply checks whether the value is mandatory or not.

Name: <input type="text" id="name" name="name" required>

This attribute can also be apply to checkboxes.

New INPUT types for text
Previously we only used to be with ‘text’ input type but now there are many more like email, url, number, tel, date and many others.

Email: <input type="email" id="email" name="email" required>
URL: <input type="url" id="url" name="url" required>
Year: <input type="number" size="4" id="year" name="year" min="1960" max="1999">
 Age: <input type="range" size="2" id="age" name="age" min="18" max="60" value="20">

Besides that there many more input types i.e. color, date, datetime, datetime-local, month, search, tel, time, week.

Patterns for input types

URL pattern: <input type="url" id="url" name="url" required pattern="https?://.+">

IPv4 Address input pattern: <input type="text" id="ip" name="ip" required pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">

Date pattern (dd/mm/yyyy or mm/dd/yyyy): <input type="text" id="date" name="date" required pattern="\d{1,2}/\d{1,2}/\d{4}">

Price pattern: <input type="text" id="price" name="price" required pattern="\d+(\.\d{2})?">