CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modaljqbootstrapvalidation
Sowmya Ganesan
Sowmya Ganesan

Reputation: 75

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'
                        }
                    }
                }
            }
        });

Upvotes: 6

Views: 21658

Answers (6)

mortenma71
mortenma71

Reputation: 1286

In bootstrap 5 simply remove the CSS class "was-validated" from the form element

Upvotes: 0

Inderjeet
Inderjeet

Reputation: 1528

reset() function will reset your form not bootstrap validation error.

so what we need to do just tell the form that your form is fresh remove was-validated from your form. Just like below.

document.getElementsByClassName('needs-validation')[0].classList.remove("was-validated")

Upvotes: 0

abdul arham
abdul arham

Reputation: 1

Reset your form when modal is about to be hidden

$("#addUserModal").on('hide.bs.modal', function(){
  $("#userForm")[0].reset();
  $('#userForm').bootstrapValidator('resetForm', true);
});

Upvotes: 0

Vinoth Narayan
Vinoth Narayan

Reputation: 275

Try the below code at which substation you want to reset the form.. 

 $('#addNodeForm').trigger("reset");

Upvotes: 0

ARC
ARC

Reputation: 1081

Try following code :

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

Upvotes: 10

Arkni
Arkni

Reputation: 1177

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:

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'
                    }
                }
            }
        }
    });

Upvotes: 10

Related Questions