HTML 5 has added a new attribute to form fields called "pattern". The idea of this new attribute is to allow you to attach a regular expression to the form field and have whatever is input into the form field validated against. This would to a large extent do away with the need to attach JavaScript to the web page in order to validate the form fields prior to sending the form to the server. As JavaScript form validation is one area where you can't just use a complete pre-written script and need to adapt for the particular fields in your form, this may make it easier for people who don't know JavaScript to be able to build client side validation into their form.
The pattern attribute takes a regular expression as its value. Now since regular expressions are basically the same across all the different languages that support them, this means that anyone who knows any language that supports regular expressions will be able to plug in an appropriate value for the validation of a field and know how it will work even though they may not know how to write JavaScript. Those who don't even know what regular expressions are will also be able to use the pattern attribute provided that they can find somewhere that offers a value for validating each of the different types of fields that they are using. Since the sorts of fields used in forms are often similar even though the way the form is laid out might be different, attaching the patterns directly to the individual fields removes and need for assembling validations in JavaScript.
Of course all this will only apply once all of the browsers that people use actually support this attribute properly. While we are waiting for that to happen we can achieve part of the benefit mentioned by setting up some JavaScript that will grab the pattern attribute and apply the validation appropriately.
Assuming that we already have our form processing set up to work unobtrusively, we do not need much extra code to be able to handle pattern attributes. All we need to do is to add the following function to our code and call it for whatever fields there are in our form where we want to check if a pattern attribute exists and to validate the value entered against that pattern if it does exist.
We can then either call this code using our addEvent function for specific fields in the form or from within the function that we have that validates the entire form.
The pattern attribute takes a regular expression as its value. Now since regular expressions are basically the same across all the different languages that support them, this means that anyone who knows any language that supports regular expressions will be able to plug in an appropriate value for the validation of a field and know how it will work even though they may not know how to write JavaScript. Those who don't even know what regular expressions are will also be able to use the pattern attribute provided that they can find somewhere that offers a value for validating each of the different types of fields that they are using. Since the sorts of fields used in forms are often similar even though the way the form is laid out might be different, attaching the patterns directly to the individual fields removes and need for assembling validations in JavaScript.
Of course all this will only apply once all of the browsers that people use actually support this attribute properly. While we are waiting for that to happen we can achieve part of the benefit mentioned by setting up some JavaScript that will grab the pattern attribute and apply the validation appropriately.
Assuming that we already have our form processing set up to work unobtrusively, we do not need much extra code to be able to handle pattern attributes. All we need to do is to add the following function to our code and call it for whatever fields there are in our form where we want to check if a pattern attribute exists and to validate the value entered against that pattern if it does exist.
validatePattern = function(e,elem) {
if (elem === undefined) elem = whichElement(e);
if (!elem.pattern) return true;
var re = new RegExp(elem.pattern);
if (!elem.value.match(re)) {
errorMessage('Entered value does not match pattern for '+elem.id+' field.');
stopDef();
return false;
}
errorMessage(' ');
}
We can then either call this code using our addEvent function for specific fields in the form or from within the function that we have that validates the entire form.
Source...