Validating Form Data Using HTML5 - HTML5 Foundations - page 147

This example accepts characters from 0 to 9 and A to Z, both upper and lowercase. Patterns are case sensitive so you
need to include both the uppercase and lowercase characters in order to get things working correctly. The + sign here
means that this rule can happen one or more times, therefore you cannot have zero characters.
Validating Length
Usually, you should use the maxlength attribute if you want to restrict the length of a whole input, but sometimes
you may want to specify the length of one section of the input. You can specify an exact length for a section within
curly braces {} .
[A-Za-z0-9]{3}
This pattern validates an alphanumeric string that is three characters long. You could also specify a range using two
numbers.
[A-Za-z0-9]{3,5}
This pattern validates an alphanumeric string that is between three and five characters long.
Validating Format
Now that you have a grasp of the basics, let's look at an example of how you can use regular expressions to validate
the format of some text.
The following pattern can be used to match a U.S. telephone number. It will validate that a telephone number begins
with a three digit area code, followed by a dash, then the first three-digits of the phone number, followed by another
dash, and finally the last four digits of the phone number; for example 000-000-0000.
[0-9]{3}[-][0-9]{3}[-][0-9]{4}
The HTML5 specification outlines that browser vendors should implement pattern validations for <input> ele-
ments that use specialized types such as url or email . This is great because it means that you don't need to worry
about dealing with more complicated regular expressions. But if you are really serious about building websites,
you'll benefit from getting a solid understanding of regular expressions. They are incredibly useful tools.
You can find a really handy list of common regular expressions for your pattern attributes at ht-
tp://html5pattern.com/ .
Summary
Data validation is important, but it is also one of the first things to get dropped when a deadline is looming and the
project is rapidly running out of time.
Validation should not be an optional extra. It should be a requirement. Validation is as beneficial to your users as it is
to you as a developer because it helps them to fill in your forms correctly and avoid problems down the line. While
HTML5 browser validation is a wonderful thing and I believe that everyone should be using it, not all web browsers