Checking Online Forms with the Validator jQuery Plug-in - A simple online form
(Page 2 of 4 )
Of course, before I attempt to show you how to use the Validator jQuery plug-in to validate data submitted through a web form, it's necessary to create the form. So, for this particular project I'm going to build a simple one that will contain three basic fields, which will allow users to enter their first and last names, and their email addresses. In short, this one will be a typical contact form, which you've probably coded hundreds of times before.
This sample online form looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample web form</title>
</head>
<body>
<form id="sampleform" method="post" action="process_form.php">
<p>First Name <input type="text" name="fname" class="required" /></p>
<p>Last Name <input type="text" name="lname" class="required" /></p>
<p>Email Address <input type="text" name="email" class="required" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
As you can see, the structure of the online form listed above is extremely simple, composed of three text fields named "fname," "lname" and "email" respectively. In addition, I decided to assign a "required" CSS class to those fields, in case they need to be styled accordingly, but for the moment I'll keep them looking pretty rudimentary.
So far, everything looks good; the scenario has been properly set up to start using the Validator plug-in at a basic level. In this case, all of the fields that compose the above contact form will need to be filled in by users, meaning that it'll be necessary not only to link the plug-in to the sample form, but configure it for checking that each field hasn't been left empty.
The details of this process will be covered in the following section, so click on the link shown below and keep reading.
Next: Validating the HTML form >>
More JavaScript Articles
More By Alejandro Gervasio
