Form Validation

While validating the submitted form on the server is still as important as it ever has been, using JavaScript to advise your visitors when they have entered invalid information into the form may no longer be necessary. HTML 5 introduced the pattern attribute to form fields which allows the individual field validation to be specified within the HTML itself without needing JavaScript.

For those not familiar with programming languages, the use of the pattern attribute may not immediately obvious as it uses what are known as regular expressions to supply a pattern that the content entered into the field must match in order to be considered valid. Regular expressions provide a standard way of defining patterns that are supported by a large number of different languages including JavaScript, most likely whichever server side language you decide to use, and now HTML. If you program in JavaScript or write back end code then chances are that you will already know how to write regular expressions and can easily write one to use with the pattern attributes in the HTML of your form. In fact you may have previously written regular expressions for the validation either in JavaScript or on the server and can simply copy the part of the expression from between the delimiters into your pattern attribute.

For those discovering regular expressions for the first time in HTML the situation is not quite so straightforward as regular expressions take a little getting used to. They can also become quite complex. Perhaps one of the most complex and rather long expressions is one to validate email addresses but fortunately that's one we will not need for our forms as HTML 5 has also introduced type="email" to identify fields where email addresses are to be entered and so we don't need to add a pattern for those.

With a regular expression you can either require a part of what is entered to match a pattern or require all of what is entered to match a pattern. When the start of the value entered must match the pattern we start the pattern with a ^ character which matches the start of the value. Similarly $ matches the end of the value so if our pattern starts with ^ and ends with $ then what is entered must match the pattern with no characters left over.

Where a particular position in the value must be a particular letter or number then we can simply enter that letter or number in that position so if the value entered had to be exactly AB then we could use the pattern ^AB$ and then that two character combination would be all that would be allowed. Of course we need a bit more flexibility than this and so regular expressions allow for lots more options. Surrounding multiple values inside of [] means that any one of those values is valid so ^[AB]$ means that the field can contain one character which can be either an A or a B.

We can also specify whether a given character is allowed to be repeated. Adding ? after a character makes that character optional - it either has the value specified or is omitted completely. Adding + after a character allows for one or more repetitions of the character and * combines both of these by allowing zero or more repetitions. So ^[AB]+$ allows for any number of A and B characters in any order so AAA, BBBB, ABBA and so on would all satisfy this pattern.

We don't need to specify the entire alphabet inside of the [] in order to allow for any letter. Regular expressions allow letters to be abbreviated as [A-Za-z] and numbers as [0-9] so if the value is allowed to contain any combination of letters and numbers we can specify ^[A-Za-z0-9]+$ as our pattern.

If we need to be more specific about the length then instead of specifying * or + we can use {} around one or two numbers. For example ^[0-9]{10}$ means exactly ten numbers and ^[A-Za-z]{5,15}$ means between 5 and 15 letters and ^[A-Za-z0-9]{4,}$ means any combination of letters and numbers that is at least four characters long.

There are lots of other codes that have special meanings in regular expressions allowing far more complex patterns to be constructed allowing our regular expressions to be as specific as they need to be. For testing a date you can either just check that the month field is a number or you can be more specific and check that it is between 1 and 12.

Regular expressions may be a new addition to HTML but they have been around for a long time in other languages and so there are plenty of web sites and books that provide the patterns to use for just about anything you are likely to want in your form. A quick search should find a number of different regular expressions that you can try out in the pattern attribute that will allow you to validate the form input and let your visitors know when they have entered something wrong without needing any JavaScript or at least with the amount of JavaScript required being much reduced.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow