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.
Introducing Key Concepts for Form Validation with the DOM - Using the DOM for validating online forms (Page 3 of 5 )
// display error messages via the DOM
If you examine the above function, then possibly you'll realize that it presents some interesting aspects that deserve an in-depth look. First, this function takes up the input box where the error was originally raised along with the respective error message as the unique incoming arguments.
Obviously, this has a justification. Since the function appends a new <span> node to the offending form field and inserts the corresponding error notice as a text node, it displays errors without having to use alert methods. Wasn't that good?
Also, you can see that an "onchange" event handler is attached to the input box in question, which triggers a new function named "hideError." Again, this makes sense, since the script assumes that the user has changed the wrong value entered in that field, thus the respective error message must be removed from the web document. Now, are you realizing how the DOM is used here for displaying and hiding notification messages? I bet you are.
Well, having explained in detail how the "showError()" function does its business, it's time to move forward and take a look at another relevant function. I'm talking about the "hideError()" function, which will be defined in the following section. Not surprisingly it is tasked with removing the displayed error messages from the web page.
Assuming that you're interested in learning how this new function will be created, click on the link shown below and keep reading.