Home arrow JavaScript arrow 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
(Page 1 of 5 )

If this article is the first one that you're reading about this subject, then possibly you'll be interested to know that there's a preceding installment; I suggest you  start from the very beginning. In the first part of this series, I demonstrated by way of a step-by-step example how to create a simple data validation mechanism which used the DOM for displaying dynamically error messages, instead of showing old-fashioned alerts.

Of course, in this case I'm not saying that this methodology is going to change forever the way that you develop your client-side verification functions, but this approach definitely can add a more professional touch to your web application, in addition to using standard methods for manipulating different web documents.

Now, returning specifically to the topics that I'll cover in this second part of the series, let me tell you that I'm going to continue expanding the original DOM-based form validation system that was created in the first article. I'm going to improve its visual presentation, which as you'll certainly recall was fairly poor.

Naturally, when it comes to introducing important modifications to the look and feel of the form checking system in question, I plan to define some straightforward CSS rules. These rules will be attached to the corresponding structural markup in such a way that all the error messages that will be shown when wrong data is entered into a particular online form will look more polished.

In addition to the complete set of visual improvements that I mentioned above, I'll provide the system with a greater level of flexibility so that it can work in tandem with a robust server-side validation mechanism which will be created with PHP. As a result of including all these new features, hopefully by the end of this series you'll have at your disposal a fully-functional form checking system that can be easily integrated with your existing applications with only minor problems.

So are you interested in learning how to expand this DOM-driven form validation application? Okay, let's get started!

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