Exception Handling in JavaScript: Validating forms Introduction

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.