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

…ept method to handle standard browser mimetype filtering. Fixes #287 and supersedes #369
jquery-validation · Apr 23, 2012 · b475b48 · b475b48
1 parent aca144b
commit b475b48
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 10 deletions.
diff --git a/additional-methods.js b/additional-methods.js
@@ -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."));
diff --git a/demo/file_input.html b/demo/file_input.html
@@ -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>
diff --git a/jquery.validate.js b/jquery.validate.js
@@ -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

diff --git a/test/methods.js b/test/methods.js
@@ -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" );