A Complete Example of Form Validation with the DOM
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.
A Complete Example of Form Validation with the DOM - Styling the sample form and the error messages (Page 4 of 5 )
In consonance with the concepts that I deployed in the previous section, in this section I'll show you how to create the set of CSS rules responsible for styling the sample form that you saw previously, in conjunction with the potential error messages thrown by the data validation script.
Having said that, below I listed the complete group of CSS declarations that add a better style to the web form in question, and the respective error notices as well. Please, have a look at them:
For this case in particular, I decided to place all the labels of the corresponding input boxes inside a separate DIV. The respective form fields have been housed in another container, in this way achieving a table-less layout for the referenced contact form.
Also, it should be noticed that a general container called "formcontainer" wraps the complete web form, in addition to housing all the eventual error messages that might be displayed during the data validation process. Short and sweet, isn't it?
As you can see, the remaining CSS declarations speak for themselves, therefore I recommend you jump right into the following section, where I'll be listing the full source code of this DOM-driven form checking application. This time I'm including the set of CSS rules that you just learned, along with the modified (X)HTML markup. Click on the link shown below and keep reading.