1. Technology

JavaScript and HTML 5

Regular Expressions

By

Man using laptop at home
Mark Bowden/E+/Getty Images

The proposals for a new version of HTML include a number of new form field types and also new attributes added to existing form fields. If these proposals are implemented then much of what we currently do with form processing can be handled directly by the HTML. The new field types do away with the need for JavaScript to generate equivalents to those input types and some of the attributes move field validation from JavaScript into the HTML.

The biggest change with regard to field validation is the addition of the pattern attribute to all the various form fields to which validation applies. This attribute allows a pattern to be specified for the input field and if anything at all is entered in the field then the value input must match the pattern or the input is considered to be invalid and must be corrected. The title attribute as well as displaying as a tooltip or in the statusbar will also be used as a part of the error reporting on the field if an invalid value is input.

This will do away with the need for most of the testing of field inputs using JavaScript but it doesn't do away with a need for a knowledge of JavaScript in order to be able to do the field validation using the pattern attribute. The pattern attribute actually takes a partial regular expression as its value. To that partial regular expression ^(?: is added to the front and )$ to the end and the resultant regular expression is then used to validate the field in exactly the same way as if that regular expression were being used to validate the field using JavaScript. As a result of this regular expressions will go from being one of the more complex parts of JavaScript that is left until relatively late in teaching newcomers how to write JavaScript to being perhaps the first thing about JavaScript that newcomers are likely to actually need.

The proposed standard specifically states that the pattern value shall be processed exactly as if it were a JavaScript regular expression once the extra characters are wrapped around the pattern to make it into a regular expression that both checks the entire field content and which also optionally allows the field to be left empty (another attribute requiredwill handle whether leaving the field empty is valid or not) . For those familiar with server side regular expressions who do not know JavaScript there will be a need to learn the differences between how the regular expressions in the language they are used to work and the way that regular expressions work in JavaScript (they are mostly the same but JavaScript does have a few restrictions that don't apply in most other languages that support regular expressions).

Hopefully when web browsers implement this part of the new HTML they will not implement it in a way that requires JavaScript to be enabled in the browser in order for the validation to be done. Only by providing the validation even when JavaScript is disabled will this new attribute actually make any actual difference to the way that client side form validation works. After all we can already add an onblur attribute to the form field that would implement that processing in HTML 3.2 provided that JavaScript is enabled.

For example - current code (which would normally all be on one line):


<input type="text" name="part"
onblur="if (!/^(?:[0-9][A-Z]{3})$/.this.value) alert(this.title+'\nYou cannot complete this form until the field is correct.');"
title="A part number is a digit followed by three uppercase letters.">

In HTML 5 this becomes (again normally all on one line):


<input type="text" name="part"
pattern="[0-9][A-Z]{3}"
title="A part number is a digit followed by three uppercase letters."

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. JavaScript and HTML 5 - Regular Expressions

©2014 About.com. All rights reserved.