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

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
  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

A Basic Approach to Server-side Data Validation with AJAX - A picture is worth a thousand words: defining the look and feel of the application
(Page 2 of 5 )

A good place to start building this AJAX-driven form validating mechanism is precisely with defining its look and feel. Constructing its (X)HTML structure, and then its visual presentation, will help give you a better idea of how the application will look at the end of the development process.

To reaffirm the above opinions, below I've included a simple screen shot, which illustrates basically how the form validation system will look, in addition to simulating a hypothetical situation where data entered on an online form is verified. Please, take a look at the following image:

As depicted above, the AJAX-based form checking application will validate the data supplied by users, as soon as these values are typed into the corresponding fields. Notice in the above image how the application shows a descriptive error message, indicating whether the data inputted is correct or not.

Although at first glance you might think that this form checking application isn't very different from those based only on JavaScript, this AJAX program will be capable of sending an HTTP request in the background each time a user finishes typing data in a particular form field. In this way it can provide a fast response to the user's actions, but at the same time rely on the safety of server-side data validation.

In this case, by combining the best of client and server technologies, it's possible to build the system that I described (and illustrated) a few lines before.

Now that you know how the AJAX application will look, it's time to move forward and start defining its corresponding (X)HTML markup. Doing so, it'll be much simpler for you to tweak the structural code and introduce your own modifications.

Over the course of the upcoming section, I'll be defining the respective (X)HTML structure for a sample form, similar to the one you saw in the previous screen shot, therefore go ahead and continue reading. It's really worthwhile, trust me.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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