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:

Definitely, one of the most common tasks that must be performed when validating a web form is checking if a particular field contains only digits. Fortunately, the Validator plug-in makes this a simple process thanks to the help of its “digits” option, which can be invoked in a fashion similar to that of the other arguments discussed in previous articles of the series.

To demonstrate a simple usage of the “digits” argument, I coded another example that checks to see if a form field labeled “age” has been filled in with digits. Take a look at how this example works:

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

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

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

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

</form>

</body>

</html>

See how easy it is to check if a specified field in a web form contains only digits? I bet you do! In the example shown above, the “digits” argument has been assigned to a field named “age” to verify that users will enter numeric values in it, but naturally the use of this option can be extended to other cases with minor troubles as well.

Now, suppose for a moment that the “age” field of the previous web form has been populated with invalid data. Then, in a situation like this, the Validator plug-in should produce an output similar to the one shown below:

Indeed, it works like a charm, right? And best of all, the whole validation process only required working with a simple argument which was passed to the “validate()” method and nothing else. But what if you need to check for valid dates also? Fortunately, the Validator program allows you to accomplish this process by using another argument called “date.”

This option will be discussed in detail in the section to come. Therefore, to see how to validate dates with this argument, click on the link that appears below and keep reading.

Next: Checking valid dates with the date option >>