Home arrow JavaScript arrow Page 4 - Introducing Key Concepts for Form Validation with the DOM

Introducing Key Concepts for Form Validation with the DOM

If you're looking for ways to validate the data submitted on your web forms, you'll be interested in this article. It's the first in a series that explains how to use the DOM to supplement your server-side validation techniques.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
October 24, 2006
  1. · Introducing Key Concepts for Form Validation with the DOM
  2. · Creating an old-fashioned form validation mechanism
  3. · Using the DOM for validating online forms
  4. · Removing error messages from the web page
  5. · Completing the validation script

print this article

Introducing Key Concepts for Form Validation with the DOM - Removing error messages from the web page
(Page 4 of 5 )

As you learned in the previous section, the "hideError()" function is called up each time the user changes a value entered in a specific input box. We do this to remove from the pertinent web page the error node that was originally appended to the document tree when a failure comes up.

Now that you know how the "hideError()" function works, let me show you its corresponding definition. It is as follows:

// remove error messages from the web document function hideError(){        this.parentNode.removeChild(this.errorNode);        this.errorNode=null;        this.onchange=null; }

Although the signature for the above function is very short, its functionality is indeed remarkable. As you can see, the "hideError()" function removes from the document tree the corresponding error node that was originally appended to a specific offending form field, in addition to disabling its "onchange" error handler.

As you'll realize, we eliminate this event handler for a simple reason: since the validation script assumes that the user has corrected the offending value entered in the form, this trigger shouldn't be active any longer. Sounds fairly logical, right?

At this point, you've learned how to display and remove error messages via the DOM, which is considerably more elegant than using silly alerts. Therefore, the next topic that I'll discuss in this tutorial will be the definition of a classical form validation function, responsible for triggering the functions that you saw before when a particular user input is considered invalid.

Want to see how this data verification will be created? Then go ahead and read the following section. I'll be there, waiting for you.

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