Understanding HTML Constraint Validation

An interactive website is one which allows the user and the site to interact in various ways such as filling in a form to make an order, subscription or to supply contact information. Whenever a web form is involved, there is need to validate the input supplied by the user, otherwise the site risks collecting invalid information. All this has to be done in a manner that is friendly to the user, otherwise frustration will ensue and traffic will move away rather than towards the site. HTML5 comes with a mechanism that allows constraint validation to be done at the front end, meaning that errors are caught at the point of entry.

Why is this even necessary?

There are several reasons why a site should have input validation capabilities. For starters, the data collected by any site needs to be:

Useful

It is already a fact that many entities and businesses are inundated by data in the millions of gigabytes. There is no reason why any business should be interested in having data that is not useful. Which is why it is necessary to ensure that for instance, no one is allowed to give a birth date of 300 years ago as a valid birthday.

Secure

While the security and integrity of data is ultimately the back end’s concern, it is necessary to ensure that the front end does not introduce anything that could hinder this. This means validation will involve prevention of injection of malicious information. It is for this reason that many sites will ensure one enters a code to prove they are not a robot, as robots are likely to come laden with malware.

Before HTML5 came into play, developers were restricted to validating using JavaScript. Fast forward to today and HTML5 offers constraint validation using an algorithm that runs in modern browsers. There are various types of validation that can be done using HTML5. These include:

‘Required’ to ensure that the field specified contains an input, and is not left blank. For this type of constraint validation, what is required is an input at all costs. Most developers will mark mandatory fields visually, say with an asterisk, and ensure that progress to the next step is denied until the required field is populated.

Validation can be done to limit input in a number field to a specified range. For instance, an age field can be limited from 18 to 100, in which case, there would be a ‘min’ and ‘max’ that checks against the input and returns an error message in case the user enters a value that is less than ‘min’ or larger than ‘max’.

Certain fields require a ‘maxlength’ validation, where the site will not allow input to exceed certain specified characters. For instance, if users are supplying a telephone number that is known not to exceed 15 characters, this could be set as the ‘maxlength’ with error messages being returned as appropriate.

‘Pattern’ is a regex validation command that is used to ensure that a field contains characters that are drawn from a set of allowed characters. This is common for password fields where it is stipulated that a password must contain numbers, uppercase letters, and special characters and so on.