A Complete Example of Form Validation with the DOM
(Page 1 of 5 )
If you’re one of those web developers who want to learn a straightforward and comprehensive method for validating online forms with the DOM, then I have good news for you. Welcome to the second installment of the series “Form validation with the DOM.” This three-part series walks you through taking advantage of the already popular Document Object Model to check user-supplied data by utilizing its handy methods and your own client-side verification routines.
If this article is the first one that you're reading about this subject, then possibly you'll be interested to know that there's a preceding installment; I suggest you start from the very beginning. In the first part of this series, I demonstrated by way of a step-by-step example how to create a simple data validation mechanism which used the DOM for displaying dynamically error messages, instead of showing old-fashioned alerts.
Of course, in this case I'm not saying that this methodology is going to change forever the way that you develop your client-side verification functions, but this approach definitely can add a more professional touch to your web application, in addition to using standard methods for manipulating different web documents.
Now, returning specifically to the topics that I'll cover in this second part of the series, let me tell you that I'm going to continue expanding the original DOM-based form validation system that was created in the first article. I'm going to improve its visual presentation, which as you'll certainly recall was fairly poor.
Naturally, when it comes to introducing important modifications to the look and feel of the form checking system in question, I plan to define some straightforward CSS rules. These rules will be attached to the corresponding structural markup in such a way that all the error messages that will be shown when wrong data is entered into a particular online form will look more polished.
In addition to the complete set of visual improvements that I mentioned above, I'll provide the system with a greater level of flexibility so that it can work in tandem with a robust server-side validation mechanism which will be created with PHP. As a result of including all these new features, hopefully by the end of this series you'll have at your disposal a fully-functional form checking system that can be easily integrated with your existing applications with only minor problems.
So are you interested in learning how to expand this DOM-driven form validation application? Okay, let's get started!
Next: Refreshing some basic concepts >>
More JavaScript Articles
More By Alejandro Gervasio
