JAVASCRIPT

Validating Ranges, Emails, and URLs with jQuery`s Validator Plug-in

In this fourth part of a seven-part series on the jQuery Validator plug-in, I explain how to use the “range,” “email” and “url” options provided for checking numeric ranges, URLs and email addresses. Using these arguments is an intuitive process that can be learned in a very short time.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

November 05, 2009

TABLE OF CONTENTS:

As I mentioned in the introduction, the Validator plug-in allows you to check very easily if data entered in a form field is within a specified numeric range, by using yet another handy option called “range.” The most significant advantage in utilizing this argument is that it permits you to achieve the same result when working with the “min” and “max” options at the same time, but in a single step.

Now that you hopefully have a vague idea of how the “range” argument functions, let me show you a concrete example of it in action. Take a look at the following code sample, please:

<!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 web form with the range argument</title>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

day: {

required: true,

range: [1, 31]

month: {

required: true,

range: [1, 12]

year: {

required: true,

range: [1920, 2008]

}

});

</script>

</head>

<body>

<p>Month <input name="month" class="required" /></p>

</form>

</body>

</html>

As you can see, the above example demonstrates how to validate numeric ranges via the aforementioned “range” option. Since in this particular case, the data collected through the web form must be supplied in the form of day, month and year respectively, the “range” argument is very useful for checking whether or not these values fall in the correct range. If any field is found to be invalid after submitting the form, then the plug-in should react by displaying a few error messages similar to the ones shown below:

Now, do you realize how easy it is to validate numeric ranges with the Validator plug-in? I bet you do. However, as I expressed in the beginning, the plug-in also has the ability to check email addresses and URLs as well. Thus, in the final section of this tutorial I’m going to show you how to accomplish these tasks with a couple of simple arguments.

Now, click on the link below and read the following segment.

Next: Validating email addresses and URLs with the email and url options >>