javascript - 带有附加表单元素的 jQuery 验证
问题描述
我已经阅读了关于 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();
});
第一个经过验证的元素有效,因为它主要在页面上。第二个没有。第三个有效,因为我在专注于那里时按下了提交。
解决方案
jQuery Validate 插件的正常操作:
通过该方法在页面加载时初始化表单上的插件。
.validate()
不要在处理程序中初始化表单(不要调用方法.validate()
)click
。.rules()
通过该方法将规则添加到动态添加的表单字段。
您不能在步骤 1 之前执行步骤 2。
您正在调用.validate()
之后.rules()
,它在click
处理程序中。该.validate()
方法是表单上插件的初始化,只应在页面加载时调用一次。
.rules()
在使用 初始化表单之前,您永远不能调用该方法.validate()
。
因此.validate()
,完全退出click
处理程序,并且只在文档就绪处理程序中调用它一次。
推荐阅读
- php - PHP 7.2.7 警告:为 foreach() 提供的参数无效
- typescript - Vue + TypeScript 覆盖`导出默认 Vue`
- oracle - 使用 Oracle 12.1 对某些用户进行区分大小写的登录
- c# - C# 使用 zip 归档 System.IO.Compression 创建 zip 文件
- java - 如何重置或重启 ARCore 会话?
- http - WebSocket 半开?
- swift - 具有属性的子类 UIButton 不会更改 UI
- cassandra - 由于页面对象序列化不当,Cassandra 分页无法正常工作
- sql - 试图在 Query 中显示所有结果
- typo3 - 如何为 TYPO3 9 LTS 编写路由方面映射器