A Basic Approach to Server-side Data Validation with AJAX

As I mentioned in the previous section, the next thing I have to do is define a few CSS declarations to polish the look and feel of the online form, as well as the remaining elements of the web document. There's no need to mention that you can code your own CSS styles and give the web page a completely different presentation; as you know, here I'm exposing only an example, thus feel free to write the CSS styles that best suit your personal needs.

Okay, having defined the structural markup of the AJAX applications, here is the full list of styles that I'll attach to the web page's elements:

  body {
    margin: 0;
    padding: 0;
  }
  p{
    text-align: center;
    font: bold 24px Arial, Tahoma;
    color: #000;
  }
  p{
    font: bold 12px Arial, Tahoma;
    color: #000;
    text-align: right;
    margin-right: 50px;
  }
  #formcontainer{
    width: 350px;
    height: 300px;
    padding: 5px;
    background: #efdfff;
    border: 1px solid #ccc;
    margin-left: auto;
    margin-right: auto;
  }
  #msgcontainer{
    width: 300px;
    height: 30px;
    padding: 10px;
    font: bold 12px Arial;
    color: #f00;
    text-align: center;
  }
  .inputbox{
    width: 200px;
    font: normal 12px Arial;
    color: #000;
  }
  .formbutton{
    width: 100px;
    font: normal 12px Arial, Tahoma;
    color: #000;
  }

If you examine the above CSS declarations, then you'll see that they're extremely simple. Basically, I styled the respective form boxes and the submitting button, while the remaining selectors are responsible for styling the containing DIVs that wrap up the online form and the area for displaying error messages. That's about it.

All right, since the above CSS rules bear not much discussion due to their simplicity, feel free to jump straight into the upcoming section, where I'll be showing you the full (X)HTML markup code of this small AJAX application, along with the CSS rules that you saw before.