javascript - 如何在动态添加的表单字段上实现先前声明的 jquery.validate 规则
问题描述
我必须克隆表单的特定部分,并且必须实现之前定义的相同验证规则。
在我研究这个问题时,几乎所有人都建议在新生成的元素中再次添加新规则。因此,我尝试使用以下代码添加新规则
let $contactItem = $(".contact")
.first()
.clone()
.insertAfter($(".contact").last());
$contactItem.find("input").each(function(){
$(this).rules("add", {
required : true,
messages : { required : 'field is required.' }
});
});
但我运气不好,这种技术并没有解决我的问题。所以我正在寻找另一种解决方案。
我正在使用的图书馆的一些细节:
- jQuery v1.9.1
- jQuery 验证插件 v1.17.0
$(document).ready(function() {
let $validator;
$("#btnAddNew")
.off("click")
.on("click", function() {
let $contactItem = $(".contact")
.first()
.clone()
.insertAfter($(".contact").last());
});
$validator = $("#contactForm").validate({
rules: {
firstName: {
required: true
},
lastName: {
required: true
}
},
messages: {
firstName: {
required: "* Required"
},
lastName: {
required: "* Required"
}
},
ignore: ":hidden, :disabled"
});
$("#btnSave")
.off("click")
.on("click", function() {
if ($validator.form()) {
console.log("ok");
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>
<div class="container">
<form id="contactForm">
<div class="contact">
<h5 class="card-title">Contact Info</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="text" class="form-control" name="firstName" placeholder="Your First Name">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Last Name</label>
<input type="text" class="form-control" name="lastName" placeholder="Your Last Name">
</div>
</div>
</div>
<button type="button" id="btnAddNew" class="btn btn-primary">Add Next</button>
<button type="button" id="btnSave" class="btn btn-primary">Save</button>
</form>
</div>
解决方案
只需添加required
元素可能是最简单的解决方案并修改默认消息。
我还注释掉了一种设置班级规则的方法。
请注意,您还需要修改名称以使其唯一。我使用了非常简单的增量逻辑,如果要添加和删除,请修改
$.extend($.validator.messages, {
required: "* required."
})
// Alternate using class rules
/*jQuery.validator.addClassRules("name-field", {
required: true
});*/
$(document).ready(function() {
let $validator;
$("#btnAddNew")
.off("click")
.on("click", function() {
let $contact = $(".contact");
let $contactItem = $contact
.first()
.clone()
.insertAfter($(".contact").last());
// increment input names
$contactItem.find('input').attr('name', function(_, curr) {
return curr + $contact.length
});
});
$validator = $("#contactForm").validate();
$("#btnSave")
.off("click")
.on("click", function() {
if ($validator.form()) {
console.log("ok");
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>
<div class="container">
<form id="contactForm">
<div class="contact">
<h5 class="card-title">Contact Info</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="text" class="form-control name-field" name="firstName" placeholder="Your First Name" required>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Last Name</label>
<input type="text" class="form-control name-field" name="lastName" placeholder="Your Last Name" required>
</div>
</div>
</div>
<button type="button" id="btnAddNew" class="btn btn-primary">Add Next</button>
<button type="button" id="btnSave" class="btn btn-primary">Save</button>
</form>
</div>
推荐阅读
- f# - 这段代码的一部分会导致 NetMQ 抛出 SocketException 吗?
- http - 如何在Windows10上使用quic协议连接iis
- python - python中导入模块rospy的问题(win10)
- python - 背景图像在带有python的pdf Wkhtmltopdf中不可见
- selenium-webdriver - 使用黄瓜 io 版本 5.6.0 无法读取标签
- php - PHP & SQL (PDO):1 行有 2 个相同的字段加入其他表
- javascript - https 分块响应中的随机坏 Unicode 字符
- gmail - java - 如何在java中使用Google的Directory API将默认的“发件人地址”和默认的“回复地址”设置为“别名”?
- autosys - 如何安排 AutoSys 作业在 1:00 AM EST 到 1:30 AM EST 之间运行
- angular - 使用 SCSS 时如何防止 Angular@12 在 -tag 上呈现“onload”属性