Home arrow JavaScript arrow Page 3 - 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 - Improving the program's look and feel
(Page 3 of 5 )

As I explained in the previous section, this DOM-based form validation application displays the corresponding error messages in a very rough way. Therefore I'm going to define some CSS styles to polish the application's visual aspect.

In simple terms, the look and feel that I plan to apply to the form checking system would be similar to the one depicted below:

As you can see in the above image, all the error messages that will be eventually displayed in response to a particular offending field will be shown next to their corresponding input boxes. This definitely improves the application's visual appearance, in addition to expanding its usability.

However, at first glance, it seems that the previous screen shot depicts a basic contact form which has been laid out using a single table. In fact, the form in question has been created only with a few DIVS (remember the Powers That Be have decreed that tables should be used only for displaying tabular data), and in accordance with this concept, the corresponding (X)HTML markup is listed below:

<!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> </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>

As you can see, the previous code listing shows how to lay out the contact form that you saw before by using only a pair of containing DIVS in conjunction with some paragraphs. So far, nothing unexpected, right?

Nevertheless, showing the structural markup that belongs to this form checking application would be rather pointless if I don't show you the group of CSS declarations that style the front end of the program. Give that, in the next few lines I'll define the set of styling rules that accompany the structure of the application so that it can look similar to the screen shot that you saw before.

As usual, if you want to learn how this will be done, go ahead and read the following lines.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials