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

Question

我有一个表单,我有一些字段,然后如果需要用户可以添加更多相同类型的字段.我使用http://jqueryvalidation.org/ validate插件来验证字段.

当我在某处阅读时,jquery validate plugin需要在字段中使用唯一的名称来验证它们.所以我将每个字段唯一命名.首先,我希望如果我使用类添加规则,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;
});

请在小提琴设置中找到标记.

示例和代码在此处设置

Answer 1

当使用这个插件中的一个方法,比如.rules(),并且定位多个元素(如a)时class,您还必须使用jQuery .each()方法.

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

并且您不能使用.rules()DOM中尚不存在的元素.只需将.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
        }
    }
});