jquery验证动态表单输入无效的插件 [英] jquery validate plugin on dynamic form inputs not working

问题描述

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

当我读某处时，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; $（b）b $ b $（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 
}）; 
}）; 
  

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

 < $（$）$（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ：counter 
; 
 $（＃word_exp_area）。append（tpl（tplData））; 
 counter + = 1; 
 $（'。work_emp_name'）。 （function（）{
 $（this）.rules（add，{
 required：true 
}）; 
}）; 
}）; 
  

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

---

然而，只需定位一个新字段，而不是使用 work_emp_name class 。

  $（form）。on（click， .add_employer，函数（e）{
 e.preventDefault（）; 
 var tplData = {
i：counter 
}; 
 $（＃word_exp_area ）.append（tpl（tplData））; //<  - 添加新字段
 $（'input [name =work_emp_name ['+ counter +']]'）。rules（add，{ /<  - 将规则应用于新字段
 required：true 
}）; 
 counter + = 1; 
}）; 
  

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

---

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

  $（＃work_form ）.validate（{
 rules：{
work_emp_name [0]：{
 required：true 
} 
} 
}）; 
  

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.

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.

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.

Here's JS that I've written.

$("#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.

example and code set up here

解决方案

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
    });
});

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
        });
    });
});

Working DEMO: http://jsfiddle.net/Yy2gB/10/

---

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;
});

Working DEMO: http://jsfiddle.net/Yy2gB/11/

---

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屋！