Permalink
Browse files

Moved old accept method to extension additional-method, added new acc…

…ept method to handle standard browser mimetype filtering. Fixes #287 and supersedes #369
  • Loading branch information...
1 parent aca144b commit b475b483f5e11b92539422f8f1c3fc94114cb403 @mlynch mlynch committed Apr 23, 2012
Showing with 96 additions and 10 deletions.
  1. +40 −0 additional-methods.js
  2. +53 −0 demo/file_input.html
  3. +0 −7 jquery.validate.js
  4. +3 −3 test/methods.js
View
@@ -380,3 +380,43 @@ jQuery.validator.addMethod("skip_or_fill_minimum", function(value, element, opti
}
return valid;
}, jQuery.format("Please either skip these fields or fill at least {0} of them."));
+
+// Accept a value from a file input based on a required mimetype
+jQuery.validator.addMethod("accept", function(value, element, param) {
+ // Split mime on commas incase we have multiple types we can accept
+ var typeParam = typeof param === "string" ? param.replace(/,/g, '|') : "image/*",
+ optionalValue = this.optional(element),
+ i, file;
+
+ // Element is optional
+ if(optionalValue) {
+ return optionalValue;
+ }
+
+ if($(element).attr("type") === "file") {
+ // If we are using a wildcard, make it regex friendly
+ typeParam = typeParam.replace("*", ".*");
+
+ // Check if the element has a FileList before checking each file
+ if(element.files && element.files.length) {
+ for(i = 0; i < element.files.length; i++) {
+ file = element.files[i];
+
+ // Grab the mimtype from the loaded file, verify it matches
+ if(!file.type.match(new RegExp( ".?(" + typeParam + ")$", "i"))) {
+ return false;
+ }
+ }
+ }
+ }
+
+ // Either return true because we've validated each file, or because the
+ // browser does not support element.files and the FileList feature
+ return true;
+}, jQuery.format("Please enter a value with a valid mimetype."));
+
+// Older "accept" file extension method. Old docs: http://docs.jquery.com/Plugins/Validation/Methods/accept
+jQuery.validator.addMethod("extension", function(value, element, param) {
+ param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+ return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+}, jQuery.format("Please enter a value with a valid extension."));
View
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<title>jQuery validation plug-in - comment form example</title>
+
+<link rel="stylesheet" href="css/screen.css" />
+<link rel="stylesheet" href="css/cmxform.css" />
+
+<script src="../lib/jquery.js"></script>
+<script src="../jquery.validate.js"></script>
+<script src="../additional-methods.js"></script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+ $("#fileForm").validate();
+});
+</script>
+
+</head>
+<body>
+
+<form class="cmxform" id="fileForm" method="post" action="">
+ <fieldset>
+ <legend>Select the indicated type of files?</legend>
+ <p>
+ <label for="file1">Select a plain text file (e.g. *.txt)</label>
+ <input type="file" id="file1" name="file1" class="required" accept="text/plain" />
+ </p>
+ <p>
+ <label for="file2">Select any image file</label>
+ <input type="file" id="file2" name="file2" class="required" accept="image/*"/>
+ </p>
+ <p>
+ <label for="file3">Select either a PDF or a EPS file</label>
+ <input type="file" id="file3" name="file3" class="required" accept="image/x-eps,application/pdf"/>
+ </p>
+ <p>
+ <label for="file4">Select any audio or image file</label>
+ <input type="file" id="file4" name="file4" class="required" accept="image/*,audio/*"/>
+ </p>
+ <p>
+ <label for="file5">Select one or more plain text files (e.g. *.txt)</label>
+ <input type="file" id="file5" name="file5" class="required" multiple accept="text/plain" />
+ </p>
+ <p>
+ <input class="submit" type="submit" value="Submit"/>
+ </p>
+ </fieldset>
+</form>
+
+</body>
+</html>
View
@@ -280,7 +280,6 @@ $.extend($.validator, {
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
- accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
@@ -1149,12 +1148,6 @@ $.extend($.validator, {
return (nCheck % 10) === 0;
},
- // http://docs.jquery.com/Plugins/Validation/Methods/accept
- accept: function(value, element, param) {
- param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
- return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
- },
-
// http://docs.jquery.com/Plugins/Validation/Methods/equalTo
equalTo: function(value, element, param) {
// bind to the blur event of the target in order to revalidate whenever the target field is updated
View
@@ -345,8 +345,8 @@ test("creditcard", function() {
ok( !method( "asdf" ), "Invalid creditcard number" );
});
-test("accept", function() {
- var method = methodTest("accept");
+test("extension", function() {
+ var method = methodTest("extension");
ok( method( "picture.gif" ), "Valid default accept type" );
ok( method( "picture.jpg" ), "Valid default accept type" );
ok( method( "picture.jpeg" ), "Valid default accept type" );
@@ -355,7 +355,7 @@ test("accept", function() {
var v = jQuery("#form").validate(),
method = function(value, param) {
- return $.validator.methods.accept.call(v, value, $('#text1')[0], param);
+ return $.validator.methods.extension.call(v, value, $('#text1')[0], param);
};
ok( method( "picture.doc", "doc"), "Valid custom accept type" );
ok( method( "picture.pdf", "doc|pdf"), "Valid custom accept type" );

0 comments on commit b475b48

Please sign in to comment.