Introducing Key Concepts for Form Validation with the DOM

Among the huge number of topics that fall under the category of web development, I'm pretty certain that client-side form validation is one of the most covered, due to its relative ease of implementation and the abundance of pre-built validation scripts that can be found on the web today.

While verifying the validity of user-supplied data with JavaScript is in fact an old subject, it's worthwhile to stress that the process itself has evolved to more sophisticated techniques, in consonance with the tends of modern web design and programming. Naturally, if you're like me, then you've probably been using those "alert" methods from many years, particularly when the DOM (Document Object Model) was very far from reaching the decent level of standardization that it has currently.

Fortunately for you and me, on today's web, client-side validation can be performed in a few elegant ways. This means that, at least progressively, alert-based notification messages will be eventually discarded, and more standard methods for checking online forms will be introduced.

Provided that you have a basic background on the DOM and its helpful bunch of methods, in this group of accessible articles, I'm going to introduce the basic concepts of how to develop a simple yet efficient mechanism for validating web forms, using only a DOM-driven methodology. Of course, this doesn't mean that you have to quickly get rid of server-side validation, which certainly is the most robust method you'll ever find, but you can use JavaScript as a good complement for your data checking routines that reside on the server.

Now, you already know what this series is about, therefore come with me and learn how to create a form validation system with the DOM. The experience will be fairly instructive, trust me!