twitter-bootstrap 用于模态的 Bootstrap 验证器不会重置表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27392082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap validator for modal doesnt reset Form
提问by Sowmya Ganesan
I am using bootstrap validator for my form inside modal.The validator gets retained on subsequent form access. For example if the do the following operation
我在模态内为我的表单使用引导程序验证器。验证器在随后的表单访问中得到保留。例如，如果执行以下操作
- Access form enter some valid value and submit the form.
Access the form again the color of the field still remain in green , since i entered a valid entry in my previous form submission
<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' } } } } });
- 访问表单输入一些有效值并提交表单。
再次访问表单字段的颜色仍然保持绿色，因为我在之前的表单提交中输入了一个有效的条目
<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' } } } } });
回答by Arkni
The hidden.bs.modalevent is fired when the modal has finished being hidden from the user, So the form will be hidden And BoostarpValidator doesn't treat or validate by default the hidden fields.
hidden.bs.modal当模态完成对用户隐藏时会触发该事件，因此表单将被隐藏并且 BoostarpValidator 默认不处理或验证隐藏字段。
So in order to reset your form when the modal being hidden, you should add:
因此，为了在模式被隐藏时重置您的表单，您应该添加：
excluded: ':disabled'
to your JS code.
到您的 JS 代码。
Live example: http://jsfiddle.net/Arkni/ndpv76bk/
实例：http: //jsfiddle.net/Arkni/ndpv76bk/
Reference:
参考：
excludeddocs : http://bootstrapvalidator.com/settings/#form-excluded
excluded文档：http: //bootstrapvalidator.com/settings/#form-excluded
EDIT
编辑
Your initialization of bootstrapValidator on your form should be like the following after adding the excludedoption:
添加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'
}
}
}
}
});
回答by ARC
Try following code :
尝试以下代码：
$('#contactform').bootstrapValidator('resetForm', true);
回答by Vinoth Narayan
Try the below code at which substation you want to reset the form..
试试下面的代码，你想在哪个变电站重置表格..
$('#addNodeForm').trigger("reset");
