Home arrow JavaScript arrow Page 4 - A Basic Approach to Server-side Data Validation with AJAX
JAVASCRIPT

A Basic Approach to Server-side Data Validation with AJAX


Would you like to learn how to validate user-supplied data using JavaScript, but without the risks? This article will show you how to handle it in a way that takes advantage of JavaScript's pluses, but adds a level of safety, thanks to AJAX. It is the first of three parts.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 17
July 11, 2006
TABLE OF CONTENTS:
  1. · A Basic Approach to Server-side Data Validation with AJAX
  2. · A picture is worth a thousand words: defining the look and feel of the application
  3. · Building a basic sample form: defining the front-end of the AJAX-based form checking system
  4. · Spicing up the sample form: defining a few CSS declarations
  5. · Putting the pieces together: listing the full (X)HTML markup and CSS styles of the AJAX application

print this article
SEARCH DEVARTICLES

A Basic Approach to Server-side Data Validation with AJAX - Spicing up the sample form: defining a few CSS declarations
(Page 4 of 5 )

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials