javascript - 无法验证 Bootstrap 模式弹出窗口中的动态内容
问题描述
我正在尝试验证模态弹出窗口中的动态内容,但通过单击模态弹出窗口上的按钮添加的动态内容未验证。在下面的工作片段中,单击添加字段后有一个添加字段按钮,但字段已添加到模式中,但问题是动态生成的字段未得到验证。
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
$(this).rules("add",
{
required: true,
messages: {
required: "This field is required",
}
});
});
$(document).on('click', '#add_field', function (e) {
$('#dynamic_div').html("<input type=text class=form-control>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Dynamic field:</label>
<div class="col-md-9" id="dynamic_div">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
解决方案
您可以添加一个函数来验证添加的新输入:
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
required($(this))
});
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<input type=text class=form-control>");
required($(this))
});
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Dynamic field:</label>
<div class="col-md-9" id="dynamic_div">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
推荐阅读
- python - 如何对分类列进行分组,然后是数值列,并基于该组对数值进行分箱
- python - Tensorflow,获取矩阵中每一行的非零值索引
- c# - Xfinium 移除特定表格单元格中的边框
- xamarin.forms - 为什么我无法在 azure 门户中为 xamarin.forms 配置我的移动应用服务?
- scala - 数据框中的交集
- hybris - CMS组件渲染器与控制器之间的区别
- blockchain - 我可以使用元组作为映射的键吗?
- python - 如何使用 Selenium 和 Firefox 找到 options.add_argument("xxxxx") 的参数列表?
- sybase - 如何将 JOOQ 的 insertInto 与多个值一起使用?(Sybase 数据库)
- http - 在Http get request dart flutter中发送一个json对象作为参数