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:

Before digging deeper into the use of the “minlength” and “maxlength” arguments, I’m going to spend a few moments reintroducing the examples developed in the previous article of the series. They demonstrated how to use the Validator plug-in to do a basic check of data entered into a simple HTML form.

That being said, here’s how these introductory examples looked originally:

(example on using the ‘validate()’ method to check all the fields of the targeted web form)

<!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 simple web form</title>

$(document).ready(function(){

$("#sampleform").validate();

});

</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 ‘validate()’ method to check only for certain fields of the targeted web form)

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

}

});

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

Undeniably, the two examples listed above are easy to follow. As you can see, in the first case the “validate()” has been called with no input arguments, therefore all of the fields included in the targeted form will be properly checked before the corresponding submission. On the other hand, the last example is a bit more complex, since it passes an extra “rules” parameter to the method to validate only the fields corresponding to the “First Name” and “Last Name” entries of the form. In addition, the data entered in these fields must be at least two characters long, due to the addition of the “minlength” option. Simple and also pretty effective, right?

Now that you hopefully recalled how to utilize the Validator plug-in for checking at a very basic level the data collected through a sample contact form, it’s time to explore some other features that come packaged with this plug-in. As I anticipated in the introduction, and as was demonstrated in the example that you just saw, it’s possible to specify a "minlength” option for each field of the form being validated. However, it’d be really helpful to clarify the use of this argument a bit further, as well as the use of its counterpart, “maxlength.”

Thus, in the section to come I’m going to set up another code sample for you, to give you a clear idea of how to perform more strict validation with the plug-in. As usual, to learn how this example will be developed, please click on the link below and keep reading.

Next: Specifying minimum lengths for all fields in a form >>