Form Validation with JavaScript Regular Expressions (Part 2)
(Page 1 of 4 )
Form validation is an issue many websites must deal with. In this second article in a two-part series, you will use the JavaScript regular expressions you learned in the first article to put together a script that will validate a range of form inputs.
In the first part of this article, I explained some of the basic building blocks of JavaScript regular expressions, and mentioned that a lot can be done with them to assist in validating the information received through online forms. In this part, I will cover what can be done with these building blocks in more detail.
Using the examples from part one (and building upon them), you can quickly put together a script that will validate a range of inputs. I’ve used the following HTML form as an example. It’s not the greatest of forms, but it serves to illustrate this example:
<html>
<head>
<title>My Form</title>
</head>
<body>
<h1>Sign-up For Our Newsletter</h1>
<p>Mandatory fields are marked *</p>
<form name=”myForm” id="myForm" method =”post”>
<table width="70%">
<tr><td>Please enter your first name*</td><td>Please enter your last name*</td></tr>
<tr><td><input id="fname" type="text" size="30"></td><td><input id="lname" type="text" size="30"></td></tr>
<tr><td>Please enter your house number or name*</td><td> Please enter your postcode or zip code*</td></tr>
<tr><td><input id="house" type="text"></td><td><input id="pcode" type="text"></td></tr>
<tr><td>Please enter your telephone number*</td><td> Please enter a second contact number</td></tr>
<tr><td><input id="telno" type="text"></td><td><input id="2nd_tel" type="text"></td></tr>
<tr><td>Please enter your email address*</td><td> Please enter your email address again*<br><tr><td><input id="email" type="text"></td><td><input id="verifyEmail" type="text"></td></tr>
<tr><td>Please enter your website URL*</td><td> Please enter your date of birth*</td></tr>|
<tr><td><input id="url" type="text"></td><td><input id="dob" type="text"></td></tr>
<tr><td>Click the button below to submit</td><td>Click the button below to clear</td></tr>
<tr><td><input id="submit" type="button" value="submit" onclick="validate()"></td><td><input id="reset" type="reset" value="reset">
</table>
</form>
</body>
</html>
You need to make sure your form has an id attribute and that all of your input fields do as well. It is good practice to include a reset button so that all fields can quickly be cleared. Nesting the elements of the form within a table ensures that the text and fields line up properly. Using <noscript> tags to advise visitors to your site that JavaScript must be enabled in the event that it is switched off used to be common practice, but Service Pack 2 on Windows XP seems to interfere with the correct operation of these tags in MS Internet Explorer, so it may be just as well to include instructions for switching on JavaScript at the top of the form, along with any other instructions for use, rather than using these tags.
Next: User-friendly enhancement >>
More JavaScript Articles
More By Dan Wellman
/ 89 
