我已经阅读了关于SO的四个相关答案,它们构成了我在此处尝试的动态验证的主要部分。
我有一个包含一些动态操作的表单,例如添加和删除包含用户学习或经验的块(div)。每个块包含一些我需要验证的元素。
仅当您先关注然后提交表单时,对附加元素的验证才有效,在此之前,如果您不关注例如“ study_5”元素并提交表单,则提交将毫无问题(即使是否具有必需的标签)
这是我的JS:
var multiple_formation_max_fields = 10;
var multiple_formation_wrapper = $(".multiple-formation");
var multiple_formation_add_button = $(".add_formation");
var x = {{ Auth::user()->candidate and Auth::user()->candidate->certifications->count() > 0 ? Auth::user()->candidate->certifications->count() + 1 : 1}};
$(multiple_formation_add_button).click(function (e) {
e.preventDefault();
if (x < multiple_formation_max_fields) {
x++;
$(multiple_formation_wrapper).append(
'<div class="sub-form">' +
// deleted unusfull code
'<div class="col-lg-6">' +
'<span class="pf-title">Établissement</span>' +
'<div class="pf-field">' +
'<input type="text" class="form-control" required id="formation_establishment_'+x+'" placeholder="ISET, Esprit, .. " name="formation_establishment[]">' +
// deleted unusfull code
'</div>' +
'</div>' +
'</div>'
);
}
$('.date').dateDropper();
$(".chosen").chosen();
$('#formation_establishment_'+x).rules('add', {
'required': true
});
$('#form').validate();
});
第一个经过验证的元素有效,因为它主要在页面上。 第二个没有。 第三个有效,因为我在专注于此时按下了提交。
答案 0 :(得分:1)
jQuery Validate插件的正常操作:
.validate()
方法在页面上页面加载上 初始化插件。不要在.validate()
处理程序中不初始化表单(不要调用click
方法)。
通过.rules()
方法向动态添加的表单字段添加规则。
您不能在步骤1之前执行步骤2。
您在.validate()
之后调用.rules()
,它在click
处理程序内。 .validate()
方法是表单上插件的初始化,仅在页面加载后被称为一次。
在用.rules()
初始化表单之前,您永远不能调用.validate()
方法。
因此,将.validate()
完全从click
处理程序中拉出,只在文档就绪处理程序中调用一次。