Bootstrap validator for modal doesnt reset Form
Solution 1
Try following code :
$('#contactform').bootstrapValidator('resetForm', true);
Solution 2
The hidden.bs.modal
event 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.
So in order to reset your form when the modal being hidden, you should add:
excluded: ':disabled'
to your JS code.
Live example: http://jsfiddle.net/Arkni/ndpv76bk/
Reference:
-
excluded
docs : http://bootstrapvalidator.com/settings/#form-excluded
EDIT
Your initialization of bootstrapValidator on your form should be like the following after adding the excluded
option:
$('#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'
}
}
}
}
});
Sowmya Ganesan
Updated on July 28, 2022Comments
-
Sowmya Ganesan almost 2 years
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' } } } } });
-
Sowmya Ganesan over 9 yearsI tried adding, but I could still see the form having the old validations. the field still appears in green colour on reopen
-
Arkni over 9 years@SowmyaGanesan did you tried the live example I've provided you ?
-
Arkni over 9 yearsAnd also, you have to read carefully the code source of my example