jquery验证动态表单输入的插件不起作用答案

【问题标题】：jquery validate plugin on dynamic form inputs not workingjquery验证动态表单输入的插件不起作用
【发布时间】：2013-12-31 22:32:19
【问题描述】：

我有一个表单，其中包含一些字段，然后如果需要，用户可以添加更多相同类型的字段。我使用http://jqueryvalidation.org/ validate plugin 来验证字段。

当我在某处阅读时，jquery 验证插件需要字段的唯一名称来验证它们。所以我唯一地命名每个字段。首先，如果我使用类添加规则，我希望 validate 插件能够处理动态添加的元素的验证。但事实证明并非如此。

因此，即使每个字段的名称都是唯一的，验证插件也只会验证最初呈现的第一个输入。

我什至尝试使用$.clone()，希望它能处理所有事件绑定。但这对我不起作用。所以我用下划线重复标记，因为有很多字段，我不想在 JS 中编写模板并相应地命名。

我找不到解决方案并卡在这里。在解决此问题之前无法继续。

这是我写的 JS。

$("#work_form").validate();

$(".work_emp_name").rules("add", {
    required: true
});

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
});

请在 fiddle 设置中找到标记。

example and code set up here

【问题讨论】：

但是您给出的示例中的验证不起作用。
@SukhwinderSodhi 确实有效。
它在第一个上运行良好，但是当添加新雇主并且您保存它而不填写另一个员工时它会保存数据
@SukhwinderSodhi 请参考答案，因为您所说的是我需要解决的问题。

标签： javascript jquery forms jquery-validate

【解决方案1】：

当使用此插件中的一种方法（如.rules()）并定位多个元素（如class）时，您还必须使用jQuery .each() 方法。

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

您不能在 DOM 中尚不存在的元素上使用 .rules()。只需将 .rules() 方法移动到创建新输入的函数内部即可。

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
    $('.work_emp_name').each(function () { 
        $(this).rules("add", {
            required: true
        });
    });
});

工作演示：http://jsfiddle.net/Yy2gB/10/

但是，您可以通过只定位一个新字段来提高效率，而不是使用 work_emp_name class 的所有字段。

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));   // <- add new field
    $('input[name="work_emp_name['+counter+']"]').rules("add", {  // <- apply rule to new field
        required: true
    });
    counter += 1;
});

工作演示：http://jsfiddle.net/Yy2gB/11/

我上面的两个示例都是为动态创建的字段添加规则。您仍然需要在 dom 准备好后为您的静态字段声明任何规则，如下所示...

$("#work_form").validate({
    rules: {
        "work_emp_name[0]": {
            required: true
        }
    }
});

【讨论】：

只是为了节省时间（或暂时），我只是在模板本身中添加了data-rule-required="true"。这也强制对动态元素进行验证规则。而且我有 8 个字段，只需单击 Add Employer 按钮（名称、工作范围、开始和结束日期、约会信等）就会重复。因此，如果我也想向这些字段添加规则，那么我必须在 Add Employer 点击监听器中编写相同的代码。太多了。相反，我选择了数据属性方法来添加验证规则。
但是通过数据属性添加规则并不能提供更多控制，例如是否有任何字段依赖于其他字段的值。因此，您的答案也适合所有这些情况并提供更多控制权。所以这是正确的方法。感谢您花时间解决这个问题。
也许这是一个模糊的问题，但像 validate 这样的插件不应该首先使用$.each 来处理动态添加的字段或添加不带类的规则吗？现在我知道它写得非常好并且有很多选择，但我的意思是这些都是插件应该具备的基本功能。
@Saching，这取决于每个开发人员。对于这个插件，你必须.each()。
您能否扩展您的答案以显示如何为这些动态规则设置自定义验证消息？

【解决方案2】：

返回第一个选定元素的验证规则或添加指定规则并返回第一个匹配元素的所有规则。要求验证父表单，即先调用 $( "form" ).validate() 或

删除指定的规则并返回第一个匹配元素的所有规则。 more info

function addRule(id){
    $("[name='work_emp_name["+id+"]']").rules("add", {
        required: true
    });
}
$("#work_form").validate();
addRule(0);

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    addRule(counter);
    counter += 1;
}); here

【讨论】：

正确的想法，但似乎比必要的更冗长。
@Sparky in this jsfiddle.net/Yy2gB/9 你的例子基本上你做了和我一样的事情，只是它只适用于新元素，而不适用于现有元素。
我的疏忽。可以在页面初始化时或通过内联 HTML 声明现有的。修正了我的答案。谢谢。
帮助我的是Requires that the parent form is validated... 在添加规则之前在表单上运行.validate() 很重要，否则它将不起作用。谢谢，@nzn

【解决方案3】：

这是因为 jQuery Validation 当前只验证数组的第一次出现。

您可以在插件上查看我的commit，该插件在任何出现命名数组时都可以正常工作。

【讨论】：