Home arrow JavaScript arrow Page 2 - Introducing Key Concepts for Form Validation with the DOM

Introducing Key Concepts for Form Validation with the DOM

If you're looking for ways to validate the data submitted on your web forms, you'll be interested in this article. It's the first in a series that explains how to use the DOM to supplement your server-side validation techniques.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
October 24, 2006
  1. · Introducing Key Concepts for Form Validation with the DOM
  2. · Creating an old-fashioned form validation mechanism
  3. · Using the DOM for validating online forms
  4. · Removing error messages from the web page
  5. · Completing the validation script

print this article

Introducing Key Concepts for Form Validation with the DOM - Creating an old-fashioned form validation mechanism
(Page 2 of 5 )

Before I proceed to create a DOM-based application for validating online forms, first allow me to construct a similar system, but in this case using the classic approach. By this I mean I will code some alert methods to notify the user when a particular input box has been left empty. Sounds familiar, right?

Based on the prerequisites that I mentioned above, a complete form validation script applied to a simple contact web page would look similar to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Alert-based form validator</title> <script language="javascript"> // validate form function validateForm(formObj){          var fname=formObj.elements[0];          if(!fname.value){alert('Enter your First Name');fname.
focus();return false};          var lname=formObj.elements[1];          if(!lname.value){alert('Enter your Last Name');lname.
focus();return false};          var email=formObj.elements[2]; if(!email.value){alert('Enter your email address');email.
focus();return false};          var age=formObj.elements[3];          if(!age.value){alert('Enter your age (1-99)');age.
focus();return false};          var postadd=formObj.elements[4];          if(!postadd.value){alert('Enter your postal address');postadd.
focus();return false};          return true; } // execute 'ValidateForm()' function when page is loaded window.onload=function(){             // check if browser is W3CDOM compatible             if(document.getElementById&&document.
getElementsByTagName&&document.createElement){                   var theform=document.getElementsByTagName('form')[0];                   if(theform){theform.onsubmit=function()
{return validateForm(this)}};     } } </script> </head> <body> <div id="formcontainer"> <form action="processform.php" method="post"> First Name <input type="text" name="fname" /><br /> Last Name <input type="text" name="lname" /><br /> Email <input type="text" name="email" /><br /> Age <input type="text" name="age" /><br /> Postal Address <input type="text" name="paddress" /><br /> Comments<br/> <textarea rows="10" cols="20"></textarea><br /> <input type="submit" name="send" value="Send Data" /> </form> </div> </body> </html>

As you clearly saw, the script listed above performs a simple validation on some of the input boxes that correspond to the contact form coded previously, and not surprisingly it displays a regular "alert" box each time one of these boxes is left blank.

So far, I could say that this form checking mechanism satisfies the requirements of many web applications that don't demand strong client-side validation on their data, in addition to displaying the corresponding error messages as simple alerts. Also, it should be noticed that the script in question is pretty standard, since it's been completely separated from the respective (X)HTML markup and resides neatly on its own behavioral layer.

However, there's still a question surrounding the previous form validation approach: what's wrong with it? Well, to be frank, I have to say...nothing! Definitely, there's nothing bad with using this method for checking user-supplied data, but undoubtedly it can be improved in all sorts of clever ways, including the manner in which all the error messages are shown.

Aside from including more robust validation functions, the previous script could use some of the most popular methods that come with the DOM to manipulate dynamically different nodes of the respective web document, and show the corresponding error notifications as native (X)HTML elements.

Indeed, this method looks much more professional, and best of all it's easy to implement on any web page. Therefore, assuming that you're pretty familiar with the DOM and its methods, in the next few lines I'll teach you how to create a form validation script that shows the error messages as part of the web page in question.

Want to see how this will be achieved? Keep reading.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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