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:

Before we learn the new material, I'm going to review how to use the Validator plug-in to validate numeric ranges, email addresses and URLs. So, here’s the full source code corresponding to the examples developed in the preceding article. It demonstrates the use of the “range,” “email” and “url” options when validating a basic web form.

(example on using the ‘range’ option)

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

$(document).ready(function(){

$("#sampleform").validate({

rules: {

day: {

required: true,

range: [1, 31]

month: {

required: true,

range: [1, 12]

year: {

required: true,

range: [1920, 2008]

}

});

</script>

</head>

<body>

<p>Month <input name="month" class="required" /></p>

</form>

</body>

</html>

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

<head>

<title>Example on validating web form with the email argument</title>

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

maxlength: 5

lname: {

required: true,

maxlength: 5

email: {

required: true,

email: 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>

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

<head>

<title>Example on validating web form with the email and url arguments</title>

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

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

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

</form>

</body>

</html>

As shown by the above code samples, validating numeric ranges, well-formatted email addresses and URLs is a straightforward process that can be tackled with minor hassles. In each of the three cases represented previously, the verification task has been accomplished by using a simple argument, which naturally has been passed to the pertinent “validate()” method. It’s that easy, really.

Well, having reviewed how to work with the “range,” “email” and “url” options provided by the Validator plug-in, it’s time to explore other validation arguments. As I explained in the introduction, the plug-in permits you to check if the field of a web form has been filled in with a string that contains only digits via another option called, not surprisingly, “digits.” Therefore, in the next section I’m going to illustrate how to use this useful option in a concrete case.

Now, to learn how to utilize the “digit” argument, please click on the link below and read the next few lines.

Next: Introducing the digits parameter >>