Introducing Key Concepts for Form Validation with the DOM

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.