Simplifying form validation — HTML5 pattern attribute

Recently, I came across pattern; a new form attribute that doesn’t seem to be hugely popular despite it’s huge capabilities. Pattern essentially let’s you use regular expressions to derive how your form fields will be validated, by matching the value of the field on form submission against a regular expression inside the pattern attribute on the same element.

While people have been implementing form validation using javascript since forms have been available on web pages, most of the current implementations are still quite clunky, cumbersome, and time consuming to implement. Regular expressions can be difficult to understand for a lot of developers (especially those who do not often use them or simply avoid them altogether) but they are the most accurate and flexible way of validating input in almost any scenario.

Taking the time to learn regular expressions is key to making the most of this attribute in the new HTML5 spec and is not so difficult to understand once you break down the components of a regular expression.


HOW TO USE IT

A good example of this is if you are creating a form that requires input in standardised formats such as phone numbers, emails, date and time, or even bank details. While you may be able to validate an email address by making the field input email with a required attribute, the other formats I mentioned would need much more bespoke solutions to incorporate validation.

If you were developing an eCommerce site for example, to validate the long card number on a credit card you could use the following code, not only prevent form submission if the field is not filled in, but you can check to see if the format matches how a typical card number would look, and set some text to display as an error message using the title attribute:

<label>Long card number (no spaces)</label>
<input type="text" name="lcn" placeholder="Enter the long card number" pattern="[0-9]{13,16}" title="Long card number is an invalid format (must be all numbers, no spaces and between 13 to 16 digits long)" required>

Looks short, right? No javascript and you could cut and paste that code into a view file and it would work — no dependencies, no bootup code, no external libraries. The only downside is that only modern browsers will support this, in which case you can simply include a polyfill library. Take a look at the Modernizr wiki (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) for more info on that.


ADVANCED USAGE

This functionality is great for the client side, and the markup is not too intimidating, but what if we could reuse this validation on the server-side? Whilst validating information on the client-side is useful, ultimately the most important place to validate data is server-side.

Since the pattern attribute is essentially a regular expression, nearly all programming languages support using patterns out of the box. If we were utilising patterns in a web application using php for example, it would be possible to use a function called preg_match (http://php.net/manual/en/function.preg-match.php) to match one of these rules to data that has been submitted via a form inside a controller:

To simplify things further you could create your own function for fetching patterns by name, for example:

<?php
function pattern($name) {
$pattern = null;
switch ($name) {
case 'lcn': // Long card number
$pattern = '[0-9]{13,16}';
break;
}
return $pattern;
}
?>

Then it would just be a case of calling this function inside the validation method of your controller, or calling the function inside the markup of the view file to output the pattern:

<label>Long card number (no spaces)</label>
<input type="text" name="lcn" placeholder="Enter the long card number" pattern="<?php echo pattern(‘lcn’); ?>" required>

This means you can reuse these patterns anywhere in your application and only need to know the name of the pattern you want to use, with that function serving as a reference for all the different validation patterns you use across the site.

The overall benefits of being able to use this functionality both server-side and client-side is a great new way to implement validation for any new projects. While I have long been an advocate of the jQuery validation library for the most part, I know I will be switching to this solution in future for most development scenarios.

I hope this overview and brief tutorial has been useful. For more technical blog posts checkout out the rest of the Eighty8 blog.


Originally published at www.eighty8design.co.uk on November 4, 2016.