JAVASCRIPT

Checking Online Forms with the Validator jQuery Plug-in

If you consider form validation applications to be the kind of coding you least look forward to, keep reading. Thanks to the Validator jQuery plug-in, validating form input from users just got a lot easier. This seven-part series will show you the ways you can use the plug-in to help you build form validation scripts much faster than you may have thought possible.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

October 23, 2009

TABLE OF CONTENTS:

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

<head>

<title>Sample web form</title>

</head>

<body>

<p>First Name <input type="text" name="fname" class="required" /></p>

<p>Email Address <input type="text" name="email" class="required" /></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 >>