Home arrow JavaScript arrow Page 5 - 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 - Putting the pieces together: listing the full (X)HTML markup and CSS styles of the AJAX application
(Page 5 of 5 )

As I promised a few lines above, below I listed the full (X)HTML markup and CSS declarations that correspond to this AJAX-based form checking application. Please, have a look at them:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
  <html>
    <head>
      <title>AJAX-BASED FORM VALIDATOR</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <script language="javascript">
      // code for client-side application layer goes here
      </script>
      <style type="text/css">
        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;
        }
      </style>
    </head>
    <body>
      <div><p>AJAX-BASED FORM VALIDATOR</p></div>
      <div id="formcontainer">
      <form method="post" action="nextpage.php">
        <p>First Name <input name="fname" type="text" required="Empty" class="inputbox" title="Enter your First Name (at least 8 characters)" /></p>
        <p>Last Name <input name="lname" type="text" required="Empty" class="inputbox" title="Enter your Last Name (at least 8 characters)" /></p>
        <p>Email <input name="email" type="text" required="EmailWin" class="inputbox" title="Enter a valid email address" /></p>
        <p><input type="submit" value="Send Data" class="formbutton" /></p>
      </form>
      <div>
    </body>
  </html>

As you can see above, I listed the complete source code that corresponds to both the (X)HTML markup and the CSS styles of the AJAX application. Besides, I included a couple of <script> tags, in order to reserve some room for the corresponding JavaScript functions responsible for sending HTTP requests in the background, as well as for controlling the flow of data entered by users. That's all I need for calling all the server-side checking routines via AJAX. Anyway, if you're feeling rather anxious and want to see how this AJAX-driven form validating application works, then you can download its full source code here and give it a try.

Wrapping up

We're done for the moment. In this first part of the series, I walked you through the key concepts, in order to build a small AJAX application which will be capable of performing an efficient server-side validation on online forms by triggering silent HTTP requests, without page reloads.

Over the course of the second article, I'll be developing the complete group of JavaScript functions, tasked with sending HTTP requests, in addition to controlling the logical flow of the entire validation process. If you're a strong advocate of AJAX, then you can't miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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