JQuery type checking input file

Question

I have a form that can contain 0 hundreds of <input type="file"> elements. I named them sequentially depending on how much was dynamically added to the page.

For example:

 <input type="file" required="" name="fileupload1" id="fileupload1"> <input type="file" required="" name="fileupload2" id="fileupload2"> <input type="file" required="" name="fileupload3" id="fileupload3"> <input type="file" required="" name="fileupload999" id="fileupload999"> 

In my jQuery, I want to test these inputs on an acceptable MIME / file type. Like this:

 $("#formNew").validate({ rules: { fileupload: { required: true, accept: "image/jpeg, image/pjpeg" } } 

Immediately my problem is that the name attribute of the elements of the input file is dynamic. It needs to be dynamic so that my web application can handle every download correctly. Therefore, obviously, using "fileupload" will not work in the rules section.

How to set rules for all inputs that have a name like "fileupload"?

This is the code that dynamically adds inputs:

 var filenumber = 1; $("#AddFile").click(function () { //User clicks button #AddFile $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader"); filenumber++; return false; }); $("#FileUploader").on('click', '.RemoveFileUpload', function () { //Remove input if (filenumber > 0) { $(this).parent('li').remove(); filenumber--; } return false; }); 

Answer 1

One item added, use the rules method to add rules

 //bug fixed thanks to @Sparky $('input[name^="fileupload"]').each(function () { $(this).rules('add', { required: true, accept: "image/jpeg, image/pjpeg" }) }) 

Demo: Fiddle

---

Update

 var filenumber = 1; $("#AddFile").click(function () { //User clicks button #AddFile var $li = $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader"); $('#FileUpload' + filenumber).rules('add', { required: true, accept: "image/jpeg, image/pjpeg" }) filenumber++; return false; }); 

Answer 2

Just use the .rules('add') method right after creating the element ...

 var filenumber = 1; $("#AddFile").click(function () { //User clicks button #AddFile // create the new input element $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" /> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader"); // declare the rule on this newly created input field $('#FileUpload' + filenumber).rules('add', { required: true, // <- with this you would not need 'required' attribute on input accept: "image/jpeg, image/pjpeg" }); filenumber++; // increment counter for next time return false; }); 

• You still need to use .validate() to initialize the plugin inside the DOM handler.

• You still need to declare rules for your static elements using .validate() . No matter what input elements are part of the form when the page loads ... declare their rules in .validate() .

• You do not need to use .each() when you use only one ONE element with a jQuery selector attached to .rules() .

• You do not need the required attribute in your input element when you declare a required rule using .validate() or .rules('add') . For some reason, if you still want the HTML5 attribute, at least use the correct format, for example required="required" .

Working DEMO: http://jsfiddle.net/8dAU8/5/

Answer 3

So, I had the same problem, and unfortunately, just adding the rules didn't help. I found out that accept: and extension: are not part of the default jQuery validate.js, and it requires an additional Methods.js plugin to work.

So, for everyone who has been following this thread and it still does not work, you can try adding additional-Methods.js to your tag in the answer above and it should work.