How HTML5 Validation Works

HTML5 validation increases the possibility that you get the right information from forms filled out by users on your website. It makes the process of validating fields simple, as it can all be done within the user's browser.

However, this can also present some problems, as not all browsers behave the same. To begin with, many older browsers that are still in use do not understand HTML5 validation. Modern browsers can handle HTML5, but they all do things slightly differently. The worst case scenario is that the form will still work in all of these browsers, just without the precise validation that you set up. This applies to the vast majority of cases.

Required

The most common type of validation found in online forms is to make certain fields compulsory so that the user must fill them in before they can proceed. To do this, you need to use the "required" attribute. Here is an example:

First Name: <input type="text" name="first_name" required>

Last Name: <input type="text" name="last_name" required>

Specifying the Content

Now that you have the compulsory fields set, you can add control over what is typed into those fields. For example, you can ensure a telephone number field contains only numbers, or that an email field contains the basic structure of an email address. This will improve your chances of getting good quality data through your form.

These are called input types. In the example above we have used the most basic input type: "text". But there are others, including:

· email

· URL

· number

· tel

· date

These are the most common, although you can also use "search", "color", "date", "time" and more.

So, let's say we want the user to enter their email address. We can do this by using the "email" input to get the user's browser to check if the content they typed in matches the general construction of an email address: name@url.domain. While this won't catch all incorrect entries, it surely helps. Here is an example of the code:

Enter your email address: <input type="email" name="email" required>

Creating a field for a website URL, however, shows the limitations of HTML5 validation in its basic form, but it also presents an opportunity to show how you can customize it. Here is a simple example of a form field that requires the user to enter a website address:

Website: <input type="url" name="website" required>

Most browsers handle this by requiring the user to type in letters followed by a colon. The browser is trying to check if it follows the structure of a website URL. For example:

https://www.google.com

The start of this URL is some letters (https) followed by a colon. As you can see, this is not very restrictive, but it will stop obvious user mistakes, like entering their email address in the website field.

But there is a way to customize this to get data with even better quality:

This uses the "pattern" attribute and a regular expression to restrict the entry to either http:// or https:// followed by something else. Of course, the user could still type anything after the second forward slash, but the added validation improves your chances of getting a correct entry.

And that, after all, is the objective of HTML5 validation – to improve the quality of data that you receive from forms by getting the user’s browser to check and validate as many of the fields as possible.