jquery在动态表单输入上验证插件不起作用

jquery validate plugin on dynamic form inputs not working

本文关键字：验证 插件 不起作用 输入 动态 表单 jquery      更新时间：2023-09-26

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

正如我在某个地方读到的，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;
});

请在小提琴架上找到标记。

此处设置的示例和代码

当使用此插件中的一个方法（如.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
        }
    }
});

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

删除指定的规则并返回第一个匹配元素的所有规则。更多信息

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

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

你可以在插件上检查我的提交，它在任何出现命名数组的情况下都能正常工作。

相关文章：