JAVASCRIPT

Using Rangelength, Min and Max with the Validator jQuery Plug-in

When it comes to validating web forms in the client, one of the most effective and elegant applications that can be used nowadays is the Validator jQuery plug-in. It's a compact and powerful piece of software written by Jörn Zaefferer that allows you to check data collected through online forms with ease in a truly unobtrusive way.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

October 30, 2009

TABLE OF CONTENTS:

Put in a simple way, the “rangelength” option, as its name clearly suggests, allows you to check if certain fields of a web form are within a specified length range. Obviously, the functionality of this argument is equivalent to using the “minlength” and “maxlength” options that you saw in the previous section, but with the advantage that in this case, only one parameter is utilized.

Of course, the best way to understand how the “rangelength” argument can be used in the validation of a web form is by means of an illustrative example. So, with that thought in mind, below I included a brand new code sample that shows a simple usage for this option. Here it is:

<!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 rangelength argument</title>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

rangelength: [2, 6]

lname: {

required: true,

rangelength: [2, 6]

email: {

required: true,

rangelength: [5, 10]

}

});

</script>

</head>

<body>

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

<p>Email Address <input name="email" class="required" /></p>

</form>

</body>

</html>

There you have it. As shown above, the “rangelength” option allows you to specify the minimum and maximum lengths for each field of the web form being validated. For this example, I coded some arbitrary values for the fields, but in production environments, naturally, the length ranges assigned to the targeted form should be chosen more carefully.

Now that you have a better idea of how to work with the “rangelength” argument, you should look at the following figure. It shows how the Validator plug-in behaves when it finds some offending fields within the sample HTML form coded before:

Considering that strict length validation on a web form can be achieved by specifying one single and intuitive argument, there’s no place for any complaints, right? Well, maybe you have a few, such as why the Validator plug-in isn’t capable of checking minimum and maximum values. But, you’d be wrong, since it actually supports this kind of validation by mean of another group of options.

These will be discussed in the last section of this article, so if you wish to learn how to work with them, click on the link that appears below and keep reading.

Next: Checking numeric ranges with the min and max options >>