Home arrow JavaScript arrow Page 2 - Checking Numbers and File Extensions with jQuery`s Validator Plug-in
JAVASCRIPT

Checking Numbers and File Extensions with jQuery`s Validator Plug-in


In this sixth part of a seven-part series on the jQuery framework's Validator plug-in, I discuss the use of the “number” and “accept” options. They allow you to validate both numeric data and file extensions in online forms with remarkable ease.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
November 09, 2009
TABLE OF CONTENTS:
  1. · Checking Numbers and File Extensions with jQuery`s Validator Plug-in
  2. · Review: the digits and dates options
  3. · The number option
  4. · The accept argument

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Checking Numbers and File Extensions with jQuery`s Validator Plug-in - Review: the digits and dates options
(Page 2 of 4 )

In case you haven’t read the previous article of the series, where I explained how to work with the “digits” and “date” options of the plug-in, below I reintroduced the pertinent examples. Here they are:

(example on using the ‘digits’ 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 digits 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,

maxlength: 5

},

lname: {

required: true,

maxlength: 5

},

email: {

required: true,

email: true

},

age: {

required: true,

digits: true

}

}

});

});

</script>

</head>

<body>

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

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

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

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

<p>Age <input type="text" name="age" class="required" /></p>

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

</form>

</body>

</html>

 

 

(example on using the ‘date’ 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 date 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,

maxlength: 5

},

lname: {

required: true,

maxlength: 5

},

email: {

required: true,

email: true

},

birth: {

required: true,

date: true

}

}

});

});

</script>

</head>

<body>

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

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

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

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

<p>Date of Birth <input type="text" name="birth" class="required" /></p>

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

</form>

</body>

</html>

As you can see above, it’s extremely simple to check if a value entered in a given form field contains only digits by utilizing the “digits” options, as illustrated by the first code sample. On the other hand, the last case shows how to work with the “date” argument to check for well-formatted dates. That’s not rocket science, is it?

So far, so good. At this stage, you’re hopefully familiar with using the previous options provided by the Validator plug-in for validating numbers and dates respectively. Nonetheless, as I stated in the beginning, the plug-in offers a couple of additional arguments that allow you to directly check numbers and file extensions. Of course, if you’re planning to build a web site that will let users to upload files to the web server, this last option might be especially helpful as long as it is backed up with strong server-side validation.

In the next section I’m going to develop another example that will teach you how to validate numbers with ease.

To see how this example will be built, click on the link 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

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