JAVASCRIPT

Validating Digits and Dates with jQuery`s Validator Plug-in

In this fifth installment of a seven-part series on the jQuery JavaScript framework's Validator plug-in, I introduce the “digits” and “date” options. They're very useful for verifying that specified fields of a targeted form contain numeric values and valid dates.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

November 06, 2009

TABLE OF CONTENTS:

As I said in the segment that you just read, the Validator plug-in will let you check for valid dates within a web form via the “date” option. However, if you’re anything like me, then you want to see an example that shows you how to work with this argument. So, with that idea in mind, below I included a final code sample that illustrates the use of the “date” option. Here it is:

<!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 the date argument</title>

$(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>

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

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

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

</form>

</body>

</html>

As shown above, validating dates with the “date” argument is a pretty intuitive process that doesn’t require any further explanation. In this particular case, the argument has been coupled to a field in the sample form that must contain the date of birth of a hypothetical user. If this specific condition isn’t satisfied, then the Validator program will react by throwing the following error message:

Simple to code and understand, right? This final example has hopefully demonstrated that checking for valid dates and digits with the Validator jQuery plug-in is an extremely simple process. Feel free to edit all of the code samples included in this article, so you can practice working with the “digits” and “date” arguments discussed previously.

Final thoughts

In this fifth installment of the series, I provided you with a quick introduction to using the “digits” and “date” options provided by the Validator plug-in, which come in really handy for verifying that specified fields of a targeted form contain numeric values and valid dates.

In the upcoming tutorial, I’m going to explain in detail how to use the plug-in for checking for valid file extensions, a feature that makes it ideal for use when performing file uploads via HTTP. Here’s my final suggestion: don’t miss the next article!

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.