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

Poor Best

Rating:

/ 1

November 09, 2009

TABLE OF CONTENTS:

As I mentioned, though the Validator plug-on offers multiple options for checking to see if the field of a targeted web form has been filled in with a numeric value, it also provides another argument, called “number,” that permits you to perform this same task in one single step. To see how this brand new argument can be used in a real-world context, check the example I included below: :

<!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 number 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,

number: true

}

});

</script>

</head>

<body>

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

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

</form>

</body>

</html>

As illustrated by the previous example, the “number” option can be used for directly checking if a specified field within an online form contains a numeric value. In this case, the form requires users to enter their ages. So, based on this rough validation criteria, the following image shows how the plug-in reacts when invalid data is entered in the “age” field:

Undeniably, the “number” option is a simple and fairly effective way to check numeric values in web forms. However, if more strict validation is required, you might want to use the “range” and “min/max” arguments discussed in previous tutorials.

Now that you have a clear idea of how to use the “number” parameter when checking online forms, it’s time to look at the other option that I mentioned in the introduction, which allows you to check for valid file extensions. This one is called “accept” and it will be discussed in detail in the final section of this tutorial.

Therefore, start reading the next segment. It’s only one click away.

Next: The accept argument >>