我有一个表单,我有一些字段,然后如果需要,用户可以添加更多相同类型的字段。我正在使用http://jqueryvalidation.org/ validate plugin 来验证字段。
当我在某处阅读时,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;
});
请在小提琴设置中找到标记。
答案 0 :(得分:35)
使用此插件中的某个方法(如.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
}
}
});
答案 1 :(得分:3)
返回第一个选定元素的验证规则或 添加指定的规则并返回第一个匹配元素的所有规则。要求验证父表单,即首先调用$(“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
答案 2 :(得分:1)
这是因为jQuery Validation仅验证当前第一次出现的数组。
您可以检查插件上的commit,它可以在任何出现的命名数组中正常工作。