JQueryvalidation输入文件类型

我有一个可以有0到数百个元素的表单。 我根据动态添加到页面的数量顺序命名它们。

例如：

在我的JQuery中，我想在可接受的MIME /文件类型上validation这些输入。 像这样：

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

我的问题是输入文件元素的name属性是动态的。 它必须是动态的，以便我的Web应用程序可以正确处理每个上载。 所以显然使用“fileupload”不会在规则部分中起作用。

如何为所有名称为“fileupload”的输入设置规则？

这是动态添加输入的代码：

 var filenumber = 1; $("#AddFile").click(function () { //User clicks button #AddFile $('
 Remove
').prependTo("#FileUploader"); filenumber++; return false; }); $("#FileUploader").on('click', '.RemoveFileUpload', function () { //Remove input if (filenumber > 0) { $(this).parent('li').remove(); filenumber--; } return false; }); 

Answer 1

添加一个元素，使用rules方法添加规则

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

演示： 小提琴

---

更新

 var filenumber = 1; $("#AddFile").click(function () { //User clicks button #AddFile var $li = $('
 Remove
').prependTo("#FileUploader"); $('#FileUpload' + filenumber).rules('add', { required: true, accept: "image/jpeg, image/pjpeg" }) filenumber++; return false; }); 

Answer 2

创建元素后，只需立即使用.rules('add')方法 ……

 var filenumber = 1; $("#AddFile").click(function () { //User clicks button #AddFile // create the new input element $('
 Remove
').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; }); 

• 您仍然需要使用.validate()来初始化DOM就绪处理程序中的插件。

• 您仍然需要使用.validate()声明静态元素的规则。 无论页面加载时哪些输入元素都是表单的一部分......在.validate()声明它们的规则。

• 当你只使用连接到.rules()的jQuery选择器定位一个元素时，你不需要使用.rules() 。

• 当您使用.rules('add') .validate()或.rules('add')声明required规则时，您required输入元素上的required属性。 无论出于何种原因，如果您仍然需要HTML5属性，至少要使用像required="required"这样的正确格式。

工作演示： http ： //jsfiddle.net/8dAU8/5/

Answer 3

所以，我有同样的问题，遗憾的是只是添加规则不起作用。 我发现accept：和extension：默认情况下不是JQuery validate.js的一部分，它需要一个额外的Methods.js插件才能使它工作。

因此，对于其他任何遵循此主题并仍然无效的人，除了上面的答案之外 ，您还可以尝试在标签中添加其他的Methods.js ，它应该可以正常工作。