Home arrow JavaScript arrow Page 4 - 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 - Styling the sample form and the error messages
(Page 4 of 5 )

In consonance with the concepts that I deployed in the previous section, in this section I'll show you how to create the set of CSS rules responsible for styling the sample form that you saw previously, in conjunction with the potential error messages thrown by the data validation script.

Having said that, below I listed the complete group of CSS declarations that add a better style to the web form in question, and the respective error notices as well. Please, have a look at them:

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

For this case in particular, I decided to place all the labels of the corresponding input boxes inside a separate DIV. The respective form fields have been housed in another container, in this way achieving a table-less layout for the referenced contact form.

Also, it should be noticed that a general container called "formcontainer" wraps the complete web form, in addition to housing all the eventual error messages that might be displayed during the data validation process. Short and sweet, isn't it?

As you can see, the remaining CSS declarations speak for themselves, therefore I recommend you jump right into the following section, where I'll be listing the full source code of this DOM-driven form checking application. This time I'm including the set of CSS rules that you just learned, along with the modified (X)HTML markup. Click on the link shown 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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials