Home arrow JavaScript arrow Page 2 - Validating Ranges, Emails, and URLs with jQuery`s Validator Plug-in
JAVASCRIPT

Validating Ranges, Emails, and URLs with jQuery`s Validator Plug-in


In this fourth part of a seven-part series on the jQuery Validator plug-in, I explain how to use the “range,” “email” and “url” options provided for checking numeric ranges, URLs and email addresses. Using these arguments is an intuitive process that can be learned in a very short time.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 05, 2009
TABLE OF CONTENTS:
  1. · Validating Ranges, Emails, and URLs with jQuery`s Validator Plug-in
  2. · Review: the rangelength, min and max options
  3. · Introducing the range argument
  4. · Validating email addresses and URLs with the email and url options

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Validating Ranges, Emails, and URLs with jQuery`s Validator Plug-in - Review: the rangelength, min and max options
(Page 2 of 4 )

Before I proceed to explain how the Validator plug-in can be used for checking numeric ranges, URLs and email addresses, I'm going to reintroduce the examples created in the previous article. They showed how to validate length ranges, as well as minimal and maximal values.

Having said that, here’s the full source code corresponding to the examples in question:

(example on using the ‘rangelength’ 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 rangelength 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: {

fname: {

required: true,

rangelength: [2, 6]

},

lname: {

required: true,

rangelength: [2, 6]

},

email: {

required: true,

rangelength: [5, 10]

}

}

});

});

</script>

</head>

<body>

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

<p>First Name <input name="fname" class="required" /></p>

<p>Last Name <input name="lname" class="required" /></p>

<p>Email Address <input name="email" class="required" /></p>

<p><input type="submit" value="Submit" /></p>

</form>

</body>

</html>

(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’ll surely recall, the “rangelength” option can be used to find out whether or not data entered into a specific form field is within a determined range of lengths, as shown in the first example. The other two code samples simply show how to make use of the “min” and “max” arguments to validate independently minimal and maximal values. That was really easy to grasp, wasn’t it?

Having reviewed the examples developed in the previous part of the series, I'm going to explain how to use the Validator plug-in for checking entire numeric ranges (the equivalent process to using the “min” and “max” options simultaneously), as well as email addresses and URLs.

To learn how to perform all of these useful tasks with Validator, you’ll have to click on the link shown below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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