I have a form that can have 0-hundreds of elements. I have named them sequentially depending on how many are dynamically added to th
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.
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;
});
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/