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 - Improving the program's look and feel (Page 3 of 5 )
As I explained in the previous section, this DOM-based form validation application displays the corresponding error messages in a very rough way. Therefore I'm going to define some CSS styles to polish the application's visual aspect.
In simple terms, the look and feel that I plan to apply to the form checking system would be similar to the one depicted below:
As you can see in the above image, all the error messages that will be eventually displayed in response to a particular offending field will be shown next to their corresponding input boxes. This definitely improves the application's visual appearance, in addition to expanding its usability.
However, at first glance, it seems that the previous screen shot depicts a basic contact form which has been laid out using a single table. In fact, the form in question has been created only with a few DIVS (remember the Powers That Be have decreed that tables should be used only for displaying tabular data), and in accordance with this concept, the corresponding (X)HTML markup is listed below:
As you can see, the previous code listing shows how to lay out the contact form that you saw before by using only a pair of containing DIVS in conjunction with some paragraphs. So far, nothing unexpected, right?
Nevertheless, showing the structural markup that belongs to this form checking application would be rather pointless if I don't show you the group of CSS declarations that style the front end of the program. Give that, in the next few lines I'll define the set of styling rules that accompany the structure of the application so that it can look similar to the screen shot that you saw before.
As usual, if you want to learn how this will be done, go ahead and read the following lines.