A Basic Approach to Server-side Data Validation with AJAX - Building a basic sample form: defining the front-end of the AJAX-based form checking system
(Page 3 of 5 )
In this particular case, defining the front-end of this AJAX-driven application for checking online forms is a very simple process. It will be limited to coding a simple web form, which will be comprised of a few text boxes to allow a user to enter typical data, such as the user's First name, Last Name, and finally an email address.
Based on the above description, here is the respective (X)HTML markup code that constructs the sample form in question:
<!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>
</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, the (X)HTML markup code listed above renders a simple online form, which is made up of three text fields: First Name, Last Name and Email respectively. Additionally, I added a "required" attribute to each field, indicating that these boxes must be filled. However don't you worry about the values assigned to this attribute, since I'll explain its correct meaning when I cover the development of the corresponding PHP validation routines later on.
So far, I created the basic structure of the sample online form, which will be used for testing the capabilities of this AJAX-based application, handy for validating forms. Now, the next logical step consists of tying the corresponding CSS styles to each element of the aforementioned form, to make it look a little more appealing and polished.
With reference to spicing up the corresponding sample form, I recommend you read the next section so you can see how this will be done. Don't worry, I'll be there waiting for you.
Next: Spicing up the sample form: defining a few CSS declarations >>
More JavaScript Articles
More By Alejandro Gervasio
/ 13 
