Home arrow JavaScript arrow Page 4 - 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) - Testing the values submitted
(Page 4 of 4 )

We then need to actually test that each of the values submitted are in the correct format. I accomplished this by using a series of nested if statements and alerts. This method is useful for demonstration and testing purposes, although in reality, a forÖnext loop would probably be more efficient, and some kind of color highlighting scheme that would flag the erroneous input values a different color, say red, on the form itself would be more professional. The example if statements and alerts however, can be constructed as follows:

if (fnameRegxp.test(fname) != true)

  alert("First name appears to be incorrect");

    if (lnameRegxp.test(lname) != true)

      alert("Last name appears to be incorrect");

        if (houseRegxp.test(house) != true)

          alert("Address 1 appears to be incorrect");

            if (pcodeRegxp.test(pcode) != true)

              alert("Address 2 appears to be incorrect");

                if (telnoRegxp.test(telno) != true)

                  alert("Telephone number appears to be
incorrect");

                    if (emailRegxp.test(email) != true)

                      alert("Email address appears to be
incorrect");

                        if (email != verEmail)

                          alert("Email appears to be
incorrect");

                            if (urlRegxp.test(url) != true)

                              alert("URL appears to be
incorrect");

                                if (dobRegxp.test(dob) !=
true)

                                  alert("Date of Birth
appears to be incorrect");

Notice that instead of using a regular expression to check that the second email address entered (that should be the same as the first for verification purposes) is correct, we simply check that its value is exactly the same as the first email address entered. 

Finally, if all of the data is in the correct format, we need this program to output a "Data Correct" alert and change the value of the action property of the form to the name of the cgi function that will process the data. Once again, against a professional backdrop, the true alert would probably be removed in favor of a fresh page thanking the visitor for their time, but this is useful for demonstration and testing purposes:

else {

  alert("Data Correct");

  document.myForm.action.value = "process.cgi";

  }

}

</script>

Another benefit to using regular expressions to validate user input is that any fields that are checked against a regular expression fail if the field is left blank, so you donít have to write any separate omission checking functions.

Explaining regular expressions is almost as difficult as coding them. It will be far easier for you to see what I mean by writing and playing around with them yourself. Unfortunately, it is not possible to be 100 percent certain that all information entered is correct, but with regular expressions you can at least be sure that 99 percent of the data is correct. 

Although this may seem like a cumbersome amount of code, without regular expressions, it would be ten times as long.  Using client-side validation is not the securest way to validate your forms, but it may save processing time on your server by ensuring that only correct data is passed to it in the first place. Other than that, JavaScript is both quick and easy to implement and the regular expressions subset of the language is simpler than that of some of the more powerful Web programming languages, so for sites that donít need maximum security, it is certainly worth considering. 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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