Home arrow JavaScript arrow Page 2 - A Complete Example of Form Validation with the DOM

A Complete Example of Form Validation with the DOM

If you’re one of those web developers who want to learn a straightforward and comprehensive method for validating online forms with the DOM, then I have good news for you. Welcome to the second installment of the series “Form validation with the DOM.” This three-part series walks you through taking advantage of the already popular Document Object Model to check user-supplied data by utilizing its handy methods and your own client-side verification routines.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
October 31, 2006
  1. · A Complete Example of Form Validation with the DOM
  2. · Refreshing some basic concepts
  3. · Improving the program's look and feel
  4. · Styling the sample form and the error messages
  5. · Putting the pieces together

print this article

A Complete Example of Form Validation with the DOM - Refreshing some basic concepts
(Page 2 of 5 )

One of the things that I'd like to do in particular, before I proceed to expand the DOM-based form checking application that I developed in the first part, consists basically of listing its full source code as it was defined initially. This should give you a clearer idea of how the system looked originally and help you to understand the different improvements that I'll introduce to it during the course of this article.

Having said that, here is the complete listing for this DOM-driven form validation application, as it was originally created in the first article of the series. Have a look at it, please:

<!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>DOM-based form validator</title> <script language="javascript"> // validate form function validateForm(formObj){             valid=true;             var fname=formObj.elements[0];             if(!fname){return};             if(!fname.value){showError(fname,'*Enter your First Name')};             var lname=formObj.elements[1];             if(!lname){return};             if(!lname.value){showError(lname,'*Enter your Last Name')};             var email=formObj.elements[2];             if(!email){return};             if(!email.value){showError(email,'*Enter your email address')};             var age=formObj.elements[3];             if(!age){return};             if(!age.value){showError(age,'*Enter your age (1-99)')};             var postadd=formObj.elements[4];             if(!postadd){return};             if(!postadd.value){showError(postadd,'*Enter your postal
address')};             return valid; } // display error messages function showError(obj,message){             if(!obj.errorNode){                         obj.onchange=hideError;                         var span=document.createElement('span');                         span.appendChild(document.createTextNode(message));                         obj.parentNode.appendChild(span);                         obj.errorNode=span;             }             valid=false;             return } // hide error messages function hideError(){             this.parentNode.removeChild(this.errorNode);             this.errorNode=null;             this.onchange=null; } // 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'll remember, the above script simply uses some comprehensive JavaScript functions to check the validity of the data entered into a basic contact form, but it also utilizes the DOM's methods for displaying potential errors that might come up during the validation process.

Logically, if you take some of your precious time and test the previous application, you'll realize that all the respective error notices are shown directly below the mentioned online form. This means that at least from an aesthetic point of view, the script indeed needs some improvements, specifically with regard to its presentation layer.

That's precisely what I'm going to do in the following section, by defining some CSS declarations that hopefully will provide the overall form checking application with a better look.

To see how this process will be performed, please click on the link below and 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