Home arrow JavaScript arrow Form Validation with JavaScript Regular Expressions (Part 2)
JAVASCRIPT

Form Validation with JavaScript Regular Expressions (Part 2)


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.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 132
May 17, 2005
TABLE OF CONTENTS:
  1. · Form Validation with JavaScript Regular Expressions (Part 2)
  2. · User-friendly enhancement
  3. · Defining the regular expressions
  4. · Testing the values submitted

print this article
SEARCH DEVARTICLES

Form Validation with JavaScript Regular Expressions (Part 2)
(Page 1 of 4 )

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials