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 a prelude to exploring the “rangelength” option that was mentioned at the beginning, I'm going to reintroduce the couple of hands-on examples developed in the preceding article. They illustrated how to work with the “minlength” and “maxlength” arguments, first independently and then in combination.

That being said, here’s the full source code corresponding to these introductory examples:

(example on using the ‘minlength’ 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 minlength argument</title>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

minlength: 2

lname: {

required: true,

minlength: 2

email: {

required: true,

minlength: 6

}

});

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

(example on using the ‘maxlength’ 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 maxlength argument</title>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

maxlength: 5

lname: {

required: true,

maxlength: 5

email: {

required: true,

maxlength: 8

}

});

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

(example on using the ‘minlenth’ and ‘maxlength’ options combined)

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

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

minlength: 2,

maxlength: 5

lname: {

required: true,

minlength: 2,

maxlength: 5

email: {

required: true,

minlength: 2,

maxlength: 8

}

});

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

As you might have realized, understanding how to use the “minlength” and “maxlength” arguments for checking length ranges on data submitted through a web form is indeed a no-brainer process. In the first code sample, minimum length rules have been assigned to all of the fields of the selected online form, while in the second example the same process has been followed using the “maxlength” argument.

Finally, the last code sample shows how to use both options simultaneously, and due to its simplicity I’m not going to spend more time explaining how it works.

So far, so good. At this point, you hopefully recalled how to check for length ranges on HTML forms using the “minlength” and “maxlength” parameters together. Fortunately, the Validator plug-in provides yet another option that permits you to accomplish this in one single step via the “rangelength” argument. This is the one we will cover in depth in the following section.

Therefore, to learn more on how to use this brand new validation option, click on the link below and read the next few lines.

Next: Checking length ranges with the rangelength option >>