twitter-bootstrapbootstrap-modaljqbootstrapvalidation

Bootstrap validator for modal doesnt reset Form


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

  1. Access form enter some valid value and submit the form.
  2. 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">&times;</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">&times;</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'
                            }
                        }
                    }
                }
            });
    

Solution

  • Try following code :

    $('#contactform').bootstrapValidator('resetForm', true);