我在模态内为我的表单使用引导验证器。验证器在后续表单访问时保留。例如,如果执行以下操作
- 访问表单 输入一些有效值并提交表单。
-
再次访问表单,字段的颜色仍然保持绿色,因为我在之前的表单提交中输入了有效的条目
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Add new Node</h4> </div> <div class="modal-body"> <div class="modal-body"> <form role="form" id="addNodeForm"> <div class="form-group"> <label for="nodename" class="control-label">Node Name</label> <input type="text" name="nodename" class="form-control" id="nodename" required> </div> </form> </div> <!-- <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <div id="thanks"></div> </div> --> </div> <div class="modal-footer"> <button type="button" id="add-close" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" id="add-save" class="btn btn-primary">Save changes</button> </div> </div>
$('#myModal').on('hidden.bs.modal', function(){ $(this).removeData('bs.modal'); $('#nodename').val(""); $('#addNodeForm').bootstrapValidator('resetForm', true); }); $('#myModal').on('show.bs.modal', function () { // $('#addNodeForm').bootstrapValidator('resetForm', true); $(this).removeData('bs.modal'); $('#addNodeForm').bootstrapValidator('resetForm', true); $.ajax( { url: "node/getnodelist", type: "GET", success:function(text) { alert(text); nodelist = text; }, error: function(jqXHR, textStatus, errorThrown) { //if fails } }); }); $('#addNodeForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { nodename: { validators: { notEmpty: { message: 'Function name is required' } } } } });
尝试以下代码:
$('#contactform').bootstrapValidator('resetForm', true);
当模态完成对用户隐藏时,将触发 hidden.bs.modal
事件,因此表单将被隐藏 默认情况下,BoostarpValidator 不会处理或验证隐藏字段。
因此,为了在隐藏模态时重置表单,您应该添加:
excluded: ':disabled'
到你的 JS 代码。
现场示例:http://jsfiddle.net/Arkni/ndpv76bk/
参考:
-
excluded
文档 : http://bootstrapvalidator.com/settings/#form-excluded
编辑
添加 excluded
选项后,表单上 bootstrapValidator 的初始化应如下所示:
$('#addNodeForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled', // <=== Adding the 'excluded' option
fields: {
nodename: {
validators: {
notEmpty: {
message: 'Function name is required'
}
}
}
}
});
尝试下面的代码,在哪个变电站重置表单。
$('#addNodeForm').trigger("reset");
模式即将隐藏时重置表单
$("#addUserModal").on('hide.bs.modal', function(){
$("#userForm")[0].reset();
$('#userForm').bootstrapValidator('resetForm', true);
});
reset() 函数将重置您的表单而不是引导验证错误。
因此,我们需要做的只是告诉表单您的表单是新鲜的,已从表单中删除已验证。就像下面一样。
document.getElementsByClassName('needs-validation')[0].classList.remove("was-validated")
在引导程序 5 中,只需从表单元素中删除 CSS 类"was-validated"