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:

If you grasped how to use the “minlength” option when validating a targeted web form, then you’ll find it even easier to understand how to work with the “maxlength” argument. All that it does is function in the opposite way -- that is, it should be used for checking that certain fields of the form aren’t longer than a specified value.

To help you understand more quickly how to utilize this option, below I coded two new examples. The first one only applies the “maxlength” argument to all of the fields that compose the contact form, while the second one uses a combination of it and its counterpart, “minlength.” Please take a close look at them:

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

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

Do you realize how easy it is to check for minimum and maximum lengths when checking the values entered into a web form? I guess you do. As shown before, the entire validation process is reduced to cascading the set of rules that need to be applied to a particular field, and nothing else. It’s really that simple, trust me. In addition, here’s another screen capture showing the behavior of the Validator plug-in when used with the first example:

Regardless of the simplicity of the two code samples developed a few lines above, they do demonstrate in a nutshell how useful the Validator plug-in can be for checking online forms in a selective and elegant manner. I strongly encourage you to tweak all of the examples shown in this tutorial, so you can improve your existing skills when using this jQuery add-on.

Final thoughts

In this second chapter of the series, I discussed in more detail the use of the “minlength” and “maxlength” options provided by the Validator jQuery plug-in, which as you saw before, can be really useful for specifying the respective minimum and maximum lengths for data entered in the fields of a web form.

In the forthcoming article, I’ll be explaining how to work with a few other handy arguments that come bundled with the plug-in. These will allow you to specify both length and number ranges for certain fields of a targeted HTML form.

Now that you’ve been warned about the topics that will be covered in the next tutorial, 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.