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:

As I expressed in the introduction, checking online forms with the Validator jQuery plug-in is an extremely easy process that in all the cases requires working with its workhorse method, which not surprisingly is called "validate()." The best way to understand how this method functions is by using it in conjunction with the example web form coded in the previous section.

With that idea in mind, below I included this sample contact form with a subtle difference: this time, the Validator plug-in has been linked to it, and in consequence, all of the form's fields will need to be populated with a non-empty string. Here's how this brand new code sample looks, after including the corresponding plug-in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on validating simple web form</title>

$(document).ready(function(){

$("#sampleform").validate();

});

</script>

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

When I said that checking a web form via the Validator plug-in demanded writing a few lines of JavaScript code, I wasn't being only metaphorical, as the code sample shown above hopefully demonstrates very clearly. As you can see, after including the jQuery library and the Validator source file, the validation process is performed on the sample form via the previously mentioned "validate()" method.

Since in this specific example, the method has been called without any additional arguments, it will simply check that all of the form fields have been filled with a non-empty string. However, you shouldn't worry for now, because more complex validation rules will be explored in future articles of this series. So, if you want to test the previous example on your own machine and attempt to submit the form without entering any values in it , you should get an output similar to this:

See how simple it is to implement an effective client-side validation mechanism with the Validator jQuery plug-in? I bet you do! Logically, in production environments, the work of the plug-in must be backed up in all cases with a thorough server side validation, but for the moment I'll keep the spotlight focused exclusively on the tasks performed by the validator itself.

Now, returning to the previous example, you might have noticed that all of the form's fields are required. However, it's also possible to configure the Validator plug-in to check only for specified fields, while ignoring others. This situation will be recreated in the last section of this article, so you can see how flexible the plug-in can be for selectively validating a web form.

To learn how this last example will be developed, click on the link below and read the next few lines.

Next: Validating web forms selectively >>