如何在 jQuery 验证中验证克隆元素？答案

【问题标题】：How to validate clone elements in jQuery validation?如何在 jQuery 验证中验证克隆元素？
【发布时间】：2013-02-22 13:16:02
【问题描述】：

我正在使用bassistance.de/jquery-plugins

这是默认的 jQuery 表单验证服务。

我知道与 jQuery 验证相关的问题问了太多次，但我的问题是
有点不同。

我有一个带有一个文件输入的表单，我正在克隆如下

var picFields = $('#file').clone(true);

并附加到表单中以上传多个文件。

在克隆时，我有一个带有“必需”名称的类并添加了类似的规则

$('.required').each(function() {
 $(this).rules('add', {
    required: true,
 });
});

并像最初一样进行验证

$('#form').validate();

它只验证第一个元素而不是所有动态添加的字段。

【问题讨论】：

你的整个.rules('add') 方法是多余的。如果字段已经有 class 或 required，则字段将自动为 required，而无需执行任何其他操作。但是，如果您未能在每个字段中包含唯一的 name 属性，那么您将遇到您所描述的确切问题。
jsFiddle 的问题：jsfiddle.net/nvK7F。我正在寻找解决方案...

标签： jquery jquery-validate

【解决方案1】：

每个输入都需要一个唯一的名称。插件无法考虑诸如 name="location[]"，你必须添加一个索引（正确的应该是 name="location[0]"）。对于克隆的元素，我首先得到 html“clone().html()”，然后替换 [0] 用我跟踪的计数器编号例如：.replace(/[0]/g, "["+cont+"]")

然后我可以安全地将生成的 html 附加到 DOM 并且插件照常工作。

记住：JQUERY VALIDATE 需要输入中的唯一名称！我为此付出了很多时间。

【讨论】：

【解决方案2】：

解决它！

我曾经做过的事情：在克隆对象后，我调用了一个创建验证的函数：

function add_another_form(){
     var new_form =  jQuery(".class").clone(true);
     new_form.appendTo(".parent");
     add_validation_for_forms();//attach again the validation !
}

function add_validation_for_forms(){
    jQuery(".class").validate({....})

但这不起作用，所以我只是在其中使用了一个 .each 函数，现在它可以工作了......

function add_validation_for_forms(){
    jQuery(".class").each(function(){
        jQuery(this).validate({....})

【讨论】：