Custom jQuery Validators for .NET FileUpload control

The jQuery Validation plugin provides nice functionality for client-side validation and is easy to customize.  Here are some custom validators I wrote for the .NET FileUpload control (Framework 4.5).  These functions validate that a file has been selected and has the desired extension and size.

1. (function (UTIL, $) {
2.     "use strict";
3.  
4.     UTIL.image_file_extensions = ['.png', '.jpg', '.jpeg', '.gif', '.bmp'];
5.  
6.     UTIL.getFileExtension = function (filename) {
7.         var idx = filename.lastIndexOf('.');
8.         return filename.substring(idx, filename.length);
9.     };
10.  
11.     UTIL.validateFileExtensions = function (element, valid_extensions) {
12.         var files = element.files,
13.             i = 0,
14.             max = files.length,
15.             ext = '',
16.             is_valid = true;
17.  
18.         while (i < max && is_valid === true) {
19.             ext = UTIL.getFileExtension(files[i].name);
20.             is_valid = ($.inArray(ext, valid_extensions) !== -1);
21.             i += 1;
22.         }
23.  
24.         return is_valid;
25.     };
26.  
27.     if ($.validator) {
28.  
29.         $.validator.addMethod("fileupload_required", function (value, element) {
30.             var is_valid = element.files.length > 0;
31.             return is_valid;
32.         }, "You must select a file for upload");
33.  
34.         $.validator.addMethod("fileupload_image_extensions", function (value, element) {
35.             var is_valid = UTIL.validateFileExtensions(element, UTIL.image_file_extensions);
36.             return is_valid;
37.         }, "You must select a valid image (.png, .jpg, .gif, .bmp) file for upload");
38.  
39.         $.validator.addMethod("fileupload_size", function (value, element) {
40.             var files = element.files,
41.                 i = 0,
42.                 max = files.length,
43.                 ext = '',
44.                 is_valid = true;
45.  
46.             while (i < max && is_valid === true) {
47.                 is_valid = (files[i].size <= 4194304);
48.                 i += 1;
49.             }
50.  
51.             return is_valid;
52.         }, "You must select a file that is smaller than 4 MB");
53.     }
54.  
55. }(Utilities, jQuery));

Once the custom validators are defined, they can be applied to any FileUpload control by defining the rules for that control:

1. $('Form').validate({
2.     rules.fileUploadControlUniqueId = {
3.         fileupload_required: true,
4.         fileupload_image_extensions: true,
5.         fileupload_size: true
6.     }
7. });

Note that the validations are applied in the order that they are added to the rules object.  In the example above, the FileUpload control would be validated first for a required file, then for the file extension, then for file size.