Home arrow JavaScript arrow Page 3 - Exception Handling in JavaScript: Validating forms Introduction
JAVASCRIPT

Exception Handling in JavaScript: Validating forms Introduction


Here you have it. Welcome to the part four of the series “Exception handling in JavaScript.” Comprised of several parts, this tutorial introduces the usage of exceptions in JavaScript, by explaining the core concepts and demonstrating practical examples for fast application in numerous client-based programs.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 8
October 04, 2005
TABLE OF CONTENTS:
  1. · Exception Handling in JavaScript: Validating forms Introduction
  2. · Setting the basics of form validation: defining custom error objects
  3. · Manipulating errors: defining custom error handling functions
  4. · Putting the pieces together: implementing the form validation script

print this article
SEARCH DEVARTICLES

Exception Handling in JavaScript: Validating forms Introduction - Manipulating errors: defining custom error handling functions
(Page 3 of 4 )

In addition to the function responsible for throwing custom error objects, the script also exposes a set of functions tasked with trapping errors and displaying warnings, in accordance with the form fields that were left blank. With reference to catching errors, below is the definition for the “genericErrorHandler()” function:

function genericErrorHandler(e){
    // get form field
    var obj=document.getElementsByTagName('form')[0].elements
[e.message.split('|')[0]];
    if(!obj){return false}
    // get error message
    var errorMsg=e.message.split('|')[1];
    // display error message
    showError(obj,errorMsg);
}

Despite the simplicity of the function above, its functionality turns it into the workhorse of the script. As you can see, whenever a custom error object is thrown, the function determines the targeted offending field along with the error message to be displayed. The following line gets the corresponding form field:

var obj=document.getElementsByTagName('form')[0].elements
[e.message.split('|')[0]];

The below expression obtains the appropriate error message:

var errorMsg=e.message.split('|')[1];

Once both parameters have been determined, they’re passed to the “showError()” function, which looks like this:

function showError(obj,errorMsg){
    if(!obj.errorNode){
        obj.onchange=hideError;
        var spn=document.createElement('span');
        spn.appendChild(document.createTextNode(errorMsg));
        obj.parentNode.appendChild(spn);
        obj.errorNode=spn;
        obj.focus();
    }
    valid=false;
}

In simple terms, this function displays a warning message by creating on the fly a <span> element, which is appended to the offending field. Since an error has occurred, a custom “errorNode” property is created and assigned to the pertinent form field. By checking the existence of this property on subsequent calls, I’m easily avoiding the showing of multiple error messages for the same field.

In a similar way, error messages are removed from the document structure by attaching an “onchange” event handler to the targeted form field, assuming that the user has modified its value to correct a bad entry. In accordance with this, the “hideError()” function is triggered whenever the data entered for that field is changed, thus here is how the mentioned function looks:

function hideError(){
  this.parentNode.removeChild(this.errorNode);
  this.errorNode=null;
  this.onchange=null;
}

The task of the function above is simply to remove the error node (in short, the <span> element previously appended) and deactivate the “onchange” event handler, because hopefully the erroneous entry has been corrected by the user.

At this point, all the relevant functions have been defined and explained. A quick way of testing the functionality of the whole checking script is to put all the pieces together and set up an example. Considering this, the next lines demonstrate how to implement an exception-based form validation script.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

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

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials