Question 15063 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Reset validation messages after close Bootstrap modal-Laravel 9 – Jquery

I have a modal with my inputs, I’m using Bootstrap modal with jQuery some validation code to validate my form on submit, my problem is that when I close the modal and then I open the modal again the messages from validation still there, so my question is, how can I reset or hide those messages when I close the modal?

Here is the Javascript code:

  $(document).ready(function() {         
      $('#addForm').validate({
          rules: {
              name: {
                  required: true,
              },
              mobile_no: {
                  required: true,
              },
              address: {
                  required: true,
              },
              email_address: {
                  required: true,
              },
          },
          messages: {
              name: {
                  required: 'Please Enter Supplier Name',
              },
              mobile_no: {
                  required: 'Please Enter Supplier mobile number',
              },
              address: {
                  required: 'Please Enter Supplier address',
              },
              email_address: {
                  required: 'Please Enter Supplier email',
              },
          },
          errorElement: 'span',
          errorPlacement: function(error, element) {
              error.addClass('invalid-feedback');
              element.closest('.form-group').append(error);
          },
          highlight: function(element, errorClass, validClass) {
              $(element).addClass('is-invalid');
          },
          unhighlight: function(element, errorClass, validClass) {
              $(element).removeClass('is-invalid');
          },
      });
  });

Here is the code in Bootstrap modal:

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Add Supplier</h5>
                  <button type="button" class=" btn btn-danger btn btn-sm close" data-dismiss="modal"
                      aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <form id="addForm" method="POST" action="{{ route('supplier.store') }}">
                  @csrf

                  <div class="modal-body">
                      <!-- name -->
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">

                              <input class="form-control" type="text" autocomplete="name" placeholder="Supplier Name"
                                  id="name" name="name" value="">
                          </div>


                      </div>

                      <!-- mobile number -->
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">

                              <input class="form-control " type="number" autocomplete="mobile_no"
                                  placeholder="Mobile Number" id="mobile_no" name="mobile_no" value="">


                          </div>
                      </div>
                      <!-- email -->
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">
                              <input class="form-control " type="email" placeholder="Email" id="email_address"
                                  name="email_address" value="">

                          </div>
                      </div>
                      <div class="col-md-12 ">
                          <div class="mb-3 position-relative form-group">
                              <input class="form-control" type="text" autocomplete="address" placeholder="Address"
                                  id="address" name="address" value="">

                          </div>
                      </div>


                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary close" data-dismiss="modal"
                          onclick="a()">Close</button>
                      <button type="submit" class="btn btn-primary">Add
                          Supplier</button>
                  </div>
              </form>
          </div>
      </div>
</div>

Code in index.php:

<div style="float: right"><button type="button " class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal" >Add Supplier</button></div><br><br>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution

    I create function resetForm like below with the help of this link enter link description here

     function resetForm() {
          $("#addForm input[type='text'],input[type='email'],input[type='number']").each(function() {
              $(this).removeClass('form-control input-validation-error');
              $(this).removeClass('form-control invalid-feedback');
              $(this).removeClass('form-control is-invalid');
              $(this).addClass("form-control");
          });
          $(".field-validation-error").text('');
      }

    and the call it in the button like below

    <button type="submit" name="reset" id="reset" class="btn btn-secondary close"
                          onclick="resetForm()" data-dismiss="modal">Close</button>

  2. 0 
    $('#exampleModal').on('hide.bs.modal', function () {
  // Remove error messages
})

    For more information about modal events:
    https://getbootstrap.com/docs/4.0/components/modal/#events

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search