JQuery Validate input file type

Question

I have a form that can have 0-hundreds of <input type="file"> elements. I have named them sequentially depending on how many are 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 validate these inputs on 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 input file elements is dynamic. It has to be dynamic so that my web application can deal with each upload correctly. So obviously using "fileupload" isn't going to work in the rules section.

How do I set the rules for all inputs which have a name like "fileupload"?

This is the code that dynamically adds the 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 the elements are added, use the rules method to add the 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

So, I had the same issue and sadly just adding to the rules didn't work. I found out that accept: and extension: are not part of JQuery validate.js by default and it requires an additional-Methods.js plugin to make it work.

So for anyone else who followed this thread and it still didn't work, you can try adding additional-Methods.js to your tag in addition to the answer above and it should work.

Answer 3

Simply use the .rules('add') method immediately 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'll still need to use .validate() to initialize the plugin within a DOM ready handler.

• You'll still need to declare rules for your static elements using .validate(). Whatever input elements that are part of the form when the page loads... declare their rules within .validate().

• You don't need to use .each(), when you're only targeting ONE element with the jQuery selector attached to .rules().

• You don't need the required attribute on your input element when you're declaring the required rule using .validate() or .rules('add'). For whatever reason, if you still want the HTML5 attribute, at least use a proper format like required="required".

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