Creating Custom HTML5 Input Types Using Regular Expressions
by
Join the DZone community and get the full member experience.
Join For FreeSolution 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:
Published at DZone with permission of Marco Casario, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments