动态表单输入上的 jquery 验证插件不起作用 [英] jquery validate plugin on dynamic form inputs not working

问题描述

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

I've a form where I'm having some fields and then if needed user can add more fields of same type. Im using http://jqueryvalidation.org/ validate plugin to validate fields.

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

As I read somewhere jquery validate plugin requires unique names to fields for validating them. So i'm naming each field uniquely. First I hoped that validate plugin will take care of dynamically added element's validation if I add rules using classes. But it turns out it does not.

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

So even if name of each field is unique, validate plugin validates only first input which was rendered initially.

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

I even tried using $.clone() in hope that it'll take care of all event bindings. But it did not worked for me. So I moved to underscore to repeat the markup as there are number of fields and I don't want to write templates in JS and name accordingly.

我找不到解决方案并卡在这里.在这个问题得到解决之前不能再谈了.

I can't find a solution to this and stuck here. Can't more on until this issue is resolved.

这是我写的 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;
});

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

Please find markup in fiddle set up.

此处设置的示例和代码

推荐答案

当使用该插件中的一种方法时，例如 .rules()，并且针对多个元素，例如 .rules()code>class，您还必须使用 jQuery .each() 方法.

When using one of the methods from this plugin, like .rules(), and targeting more than one element, like a class, you must also use the jQuery .each() method.

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

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

And you cannot use .rules() on elements that don't yet exist in the DOM. Simply move the .rules() method to inside the function that creates your new inputs.

$("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 的所有字段.

However, you can make it more efficient by only targeting the one new field, instead of all fields with the 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 准备好后为您的静态字段声明任何规则，如下所示...

Both of my examples above are for adding rules to the dynamically created fields. You'll still need to declare any rules for your static fields upon dom ready as follows...

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

这篇关于动态表单输入上的 jquery 验证插件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！