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:

Unquestionably, one of the most common validation tasks that must be performed by a number of web applications is checking for valid file extensions to guard against attacks. To help prevent these potential issues, the Validator plug-in provides a handy option called “accept” that allows you to define a range of “permitted” file extensions for a specific form field. If for whatever reasons, the extension entered in the field doesn’t match this range, it’ll be rejected.

Here’s an example that shows how to use the “accept” argument for validating some typical image extensions:

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

$(document).ready(function(){

$("#sampleform").validate({

rules: {

fname: {

required: true,

maxlength: 5

lname: {

required: true,

maxlength: 5

email: {

required: true,

email: true

avatar: {

required: true,

accept: "jpg|gif|png"

}

});

</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>

<p>Avatar <input type="text" name="avatar" class="required" /></p>

</form>

</body>

</html>

As depicted above, the “accept” option rejects unwanted file extensions. In the example coded before, the argument will consider valid only “jpg,” “gif” and “png” files, so if a hypothetical user tries to submit a different type of file, he/she would get an error similar to the one shown below:

Here you have it. Now with this basic example of the “accept” option in action, you’re armed with the background required to perform client-side validation within any web application that allows file uploads via HTTP.

Feel free to edit all of the code samples included in this tutorial. It will help sharpen your skills with the “number” and “accept” arguments provided by the Validator plug-in.

Final thoughts

In this sixth episode of the series, I discussed the use of the “number” and “accept” options that come with jQuery's Validator plug-in, which allow you to validate both numeric data and file extensions in online forms with remarkable ease. I think you’ll find the last option pretty useful, particularly if you’re planning to build a web site that will let users upload their files via a web form.

In the last article, I’m going to finish this round-up on the Validator plug-in by showing you how to use it for checking whether two fields of an HTML form have been filled with the same values (handy for implementing the typical password confirmation), and how to display customized error messages.

You don’t have any excuses to miss the final part!

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.