Home arrow JavaScript arrow Page 4 - Using Rangelength, Min and Max with the Validator jQuery Plug-in
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
October 30, 2009
TABLE OF CONTENTS:
  1. · Using Rangelength, Min and Max with the Validator jQuery Plug-in
  2. · Review: the minlength and maxlength options
  3. · Checking length ranges with the rangelength option
  4. · Checking numeric ranges with the min and max options

print this article
SEARCH DEVARTICLES

Using Rangelength, Min and Max with the Validator jQuery Plug-in - Checking numeric ranges with the min and max options
(Page 4 of 4 )

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on validating web form with min argument</title>

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.validate.js" type="text/javascript"></script>

<script>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

day: {

required: true,

min: 1

},

month: {

required: true,

min: 1

},

year: {

required: true,

min: 1920

}

}

});

});

</script>

</head>

<body>

<form id="sampleform" method="post" action="process_form.php">

<p>Day <input name="day" class="required" /></p>

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

<p>Year <input name="year" class="required" /></p>

<p><input type="submit" value="Submit" /></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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on validating web form with max argument</title>

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.validate.js" type="text/javascript"></script>

<script>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

day: {

required: true,

max: 31

},

month: {

required: true,

max: 12

},

year: {

required: true,

max: 2008

}

}

});

});

</script>

</head>

<body>

<form id="sampleform" method="post" action="process_form.php">

<p>Day <input name="day" class="required" /></p>

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

<p>Year <input name="year" class="required" /></p>

<p><input type="submit" value="Submit" /></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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials