Home arrow JavaScript arrow Page 5 - 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 - Putting the pieces together
(Page 5 of 5 )

As I expressed in the section that you just read, I'm certain that you want to see how the complete source code of this DOM-based form validation application looks. Thus, attending to this specific requirement, below I listed the entire form data checking script, together with the pertinent set of CSS rules:

<!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.className='error';                         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> <style type="text/css"> body{             margin: 0;             padding: 0;             background: #fff; } #formcontainer{             width: 600px;             height: 450px;             background: #eee;             margin-left: auto;             margin-right: auto;             border: 1px solid #ccc; } #labelcontainer{             float: left;             width: 200px;             text-align: right;             padding-right: 10px; } #labelcontainer p{             font: normal 12px Arial, Helvetica, sans-serif;             color: #000;             margin: 10px 0 0 0; } #boxcontainer{             float: left;             width: 300px; } #boxcontainer p{             font: normal 12px Arial, Helvetica, sans-serif;             color: #000;             margin: 4px 0 0 0; } span{             font: bold 12px Arial, Helvetica, sans-serif;             color: #f00;             margin-left: 10px; } </style> </head> <body> <div id="formcontainer"> <form action="processform.php" method="post"> <div id="labelcontainer"> <p>First Name</p> <p>Last Name</p> <p>Email</p> <p>Age</p> <p>Postal Address</p> <p>Comments</p> </div> <div id="boxcontainer"> <p><input type="text" name="fname" /></p> <p><input type="text" name="lname" /></p> <p><input type="text" name="email" /></p> <p><input type="text" name="age" /></p> <p><input type="text" name="paddress" /></p> <p><textarea rows="10" cols="20"></textarea></p> <p><input type="submit" name="send" value="Send Data" /></p> </div> </form> </div> </body> </html>

That's about it. Of course, feel free to replace the existing JavaScript validation functions with yours, so you can fine tune the previous script. Hopefully, you'll end up with a fully-functional form checking application that uses the DOM for manipulating dynamically the tree of the respective web document.

Final thoughts

In this second part of the series, I demonstrated how to improve the overall look and feel of this DOM-driven form validation application by including some comprehensive CSS declarations into the original script.

However, you'll enjoy the best of the fruit only in the final tutorial, since in that article I'll show you how to integrate this client-side script will a full-featured form validation class created with PHP 5. You don't have any excuses to miss it!

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

- 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