![](/img/trans.png)
[英]Jquery Validation Plugin (.validate) is not working in Dynamic Form(loop form)
[英]jquery validate plugin on dynamic form inputs not working
我有一个表格,其中有一些字段,然后如果需要,用户可以添加更多相同类型的字段。 我正在使用http://jqueryvalidation.org/ validate插件来验证字段。
当我在某处阅读jquery validate插件时,需要使用唯一的名称来验证字段。 所以我要对每个字段进行唯一命名。 首先,我希望如果我使用类添加规则,则validate插件将负责动态添加元素的验证。 但事实并非如此。
因此,即使每个字段的名称都是唯一的,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()
如.rules()
并针对多个元素(如class
.rules()
定位时,还必须使用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
的所有字段来提高work_emp_name
。
$("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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.