This is an excerpt from the HTML5 Solutions: Essential Techniques for HTML5 Developers book by Apress (where I'm one of the author).
Solution 4-8: Creating custom input types using regular expressions
Regular expressions provide a powerful, concise, and flexible means for matching strings of text, such as
particular characters, words, or patterns of characters. A regular expression is written in a formal language
that can be interpreted by a regular expression processor, which is a program that either serves as a
parser generator or examines text and identifies parts that match the provided specification. See Wikipedia
for more information: http://en.wikipedia.org/wiki/Regular_expression.
HTML5 allows you to check the user’s inputs and to match the input values against a regular expression.
What’s involved
The code that you needed to write to use regular expressions with previous versions of HTML was
as follows:
<input type="text" name="ssn"
onblur="if (!^\d{3}-\d{2}-\d{4}$this.value) alert(this.title+'\nAn error occurred. Please
verify your data.');" title="The Social Security Number"/>
On the onblur event of the input element, a JavaScript statement is executed. It controls the pattern to be
applied to the data in the field, and it provides an error message if the validation wasn’t successful.
With HTML5, a new attribute is available that allows you to associate a pattern of characters via regular
expressions to a text input to be applied as validation of the data inserted in the field. The markup for this
is really simple:
<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$"
The value specified in the pattern attribute must match the JavaScript pattern production as described in
this document: www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf.
Note: Matching the JavaScript pattern implies that the regular expression language used
for this attribute is the same as that used in JavaScript, except that the pattern attribute
must match the entire value—not just any subset. (This is somewhat as if it implied a
^(?: at the start of the pattern and a )$ at the end.)
To provide the user with a description of the pattern, or an error reporting on the field if an invalid value is
entered, you can use the attribute title:
<input type="text" name="ssn"
pattern="(!^\d{3}-\d{2}-\d{4}$"
title="The Social Security Number" />
How to build it
In the following solution, we use a regular expression to validate the American zip code:
(\d{5}([\-]\d{4})?)
This expression is inserted in the pattern attribute of the text input. Here is the complete code:
<!DOCTYPE html>
<html>
<head>
<title>
Solution 4-8: Creating custom input types using regular expressions
</title>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Solution 4-8: Creating custom input types using regular expressions</legend>
<label> Insert a valid American Zip code:
<input type="text" name="ssn"
pattern="(\d{5}([\-]\d{4})?)"
title="Zip Code" />
</label>
<p><input type="submit" value="Check Zip code" /> </p>
</fieldset>
</form>
</body>
</html>
When you execute the file in a browser, such as Opera, that supports the pattern attribute, and click the
submit button of the form.
The browser provides control over the validity of the data that matches the regular expression specified in the attributes pattern. If it fails, it returns an error message.
Expert tips
Not all browsers support this powerful attribute yet. Fortunately, there is a library that fills this gap:
Google’s Web Forms 2, which you can find at the following address: https://github.com
/westonruter/webforms2.
The project, as described on the site, is a cross-browser implementation of the WHATWG Web Forms 2.0
specification. If the library realizes when it is loaded that the browser is not compatible with some of the
new HTML5 functions, such as the pattern attribute, it applies its own methods instead.
You need to import the JavaScript wbforms2_src.js library using the script tag to use the library:
<script type="text/javascript" src="YOUR_FOLDER/webforms2_src.js"></script>
It is also important for the webforms2.css and webforms2-msie.js both to be located in the same directory
as webforms2.js or webforms2-p.js (whichever you decide to use).
The implementation has been tested and should work in the following browsers:
Mozilla Firefox 1.0.8
Mozilla Firefox 1.5.0.9
Mozilla Firefox 2
Internet Explorer 6
Internet Explorer 7
Safari 2.0.4
Safari 3 (Windows)
Opera 9 (native experimental implementation)
Comments