JAVASCRIPT

Using Minlength and Maxlength with the Validator jQuery Plug-in

If you don't know how to make your web site check web forms in the client, it's time you learned about the Validator jQuery plug-in. It's a compact and powerful application based on the popular jQuery library that will let you perform all sorts of clever validations on online forms in a truly no-brainer fashion, without spending endless hours coding complex JavaScript checking functions to check user-supplied data. This is the second part of a seven-part series that examines this plug-in in detail.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

October 29, 2009

TABLE OF CONTENTS:

In the previous segment, I discussed the use of the “minlength” option to specify that certain fields of the targeted form should be at least two characters long. It's extremely simple to extend the use of this argument to all the fields, thus performing a more strict validation on user-submitted data.

So, say for instance that the email address of the HTML form coded previously now will be a required field, and a value of at least six characters long must be entered in it. How can this be accomplished? Well, the following example should answer this question for you. Check it out:

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

It’s hard to believe, but that’s all the JavaScript code required to validate all of the fields of the above HTML form, which in this specific case must fit a minimum length as well. As you can see, thanks to the functionality given by the “minlength” option, it is pretty simple to define validation rules like these for any given web form. To complement the above example, here’s a screen capture that shows how well the Validator plug-in works when it detects an offending field:

Pretty good, huh? Not only does the plug-in permit us to validate fields in a stricter manner, but this process can be done in a truly unobtrusive fashion. You get double the benefits!

Having explained how the “minlength” option can be used to require minimum lengths for certain fields of a selected HTML form, it’s time to see how its counterpart “maxlength” argument can be utilized for specifying a maximum number of characters for those fields.

This particular situation will be represented with another example that will be an appropriate conclusion for this tutorial. Thus, to see how the “maxlength” option can be employed in a concrete case, please click on the link below and read the next few lines.

Next: Specifying maximum lengths for all fields in a web form >>