Home arrow JavaScript arrow Page 4 - 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
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 - Validating email addresses and URLs with the email and url options
(Page 4 of 4 )

In reality, checking email addresses and URLs with the Validator plug-in is only a matter of specifying two additional options within the “validate()” method, called “email” and “url.” Since their usage is very intuitive, I don’t think that you’ll have any major problems understanding how they work. The examples below show how to work with these arguments. Pay close attention to them:

(example on using the ‘email’ 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 the email argument</title>

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

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

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

<script>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

maxlength: 5

},

lname: {

required: true,

maxlength: 5

},

email: {

required: true,

email: true

}

}

});

});

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

</form>

</body>

</html>

(example on using the ‘url’ 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 the email and url arguments</title>

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

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

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

<script>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

maxlength: 5

},

lname: {

required: true,

maxlength: 5

},

email: {

required: true,

email: true

},

url: {

required: true,

url: true

}

}

});

});

</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>Web Site <input name="url" class="required" /></p>

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

</form>

</body>

</html>

There you have it. Now, you learned by means of a couple of basic examples how to validate email addresses and URLs using the handy “email” and “url” options. Of course, as you might have noticed, the first code sample will only check whether the string entered in the field named “email” is a well-formatted email address, and nothing else. Any further validation should always be performed on the web server.

On the other hand, the last example will also check for a correctly-formatted URL, but it won’t verify that the URL really exists. Again, more strict checking procedures should be delegated to a server-side scripting language.

Well, at this point you should be armed with the proper background to start using the Validator plug-in for checking numeric ranges, as well as for valid URLs and email addresses. As with other arguments provided by the plug-in, the best way to understand how they work is with lots of practice. So, go head and play with all of the code samples included in this tutorial. You’ll have a great time, that’s for sure!

Final thoughts

In this fourth part of the series, I explained how to use the “range,” “email” and “url” options provided by the Validator jQuery plug-in for checking numeric ranges, URLs and email addresses. As you saw previously, using these arguments is an extremely intuitive process that can be learned in a very short time.

In the next article, I’m going to explain how to use the plug-in for checking numeric values. Don’t 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

- 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

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 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials