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:

As with the “minlength” and “maxlength” options that were discussed in the previous article, the Validator plug-in offers a pair of complementary arguments that can be used for checking numeric ranges, or in other words, if values entered in a field on a web form fall within specified limits. These new options are called simply “min” and “max” respectively, and a basic demonstration of how to use them is shown below:

(example on using the ‘min’ option)

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

$(document).ready(function(){

$("#sampleform").validate({

rules: {

day: {

required: true,

min: 1

month: {

required: true,

min: 1

year: {

required: true,

min: 1920

}

});

</script>

</head>

<body>

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

</form>

</body>

</html>

(example on using the ‘max’ option)

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

$(document).ready(function(){

$("#sampleform").validate({

rules: {

day: {

required: true,

max: 31

month: {

required: true,

max: 12

year: {

required: true,

max: 2008

}

});

</script>

</head>

<body>

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

</form>

</body>

</html>

As you can see from the examples listed above, using the “min” and “max” options when validating a web form isn’t brain surgery. In the first code sample, the “min” argument has been used for specifying minimum values within a form that collects generic date information, including day, month and year, while in the second case the inverse checking process is performed via the “max” parameter.

Hopefully, with those examples available for testing purposes, from this point on you’ll have a clearer idea of how to specify numeric limits when checking HTML forms with the Validator plug-in. Happy validation!

Final thoughts

In this third article of the series, I discussed the use of the “min” and “max” options provided by the Validator jQuery plug-in, which as you saw earlier, come in useful for checking minimum and maximum values for fields of a selected web form. Verifying numeric values with these two arguments is a straightforward process that doesn’t require any special JavaScript skills.

In the next chapter, I’m going to show you how to use the plug-in for validating ranges of numeric values, email addresses and URLs as well. Therefore, now that you know what to expect from the upcoming part of the series, you don’t have any excuses to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.