Reset validation messages after close Bootstrap modal-Laravel 9-CodePudding

I have a modal with my inputs, I'm using Bootstrp modal with jqeury 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  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div  role="document">
          <div >
              <div >
                  <h5  id="exampleModalLabel">Add Supplier</h5>
                  <button type="button"  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 >
                      <!-- name -->
                      <div >
                          <div >

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


                      </div>

                      <!-- mobile number -->
                      <div >
                          <div >

                              <input  type="number" autocomplete="mobile_no"
                                  placeholder="Mobile Number" id="mobile_no" name="mobile_no" value="">


                          </div>
                      </div>
                      <!-- email -->
                      <div >
                          <div >
                              <input  type="email" placeholder="Email" id="email_address"
                                  name="email_address" value="">

                          </div>
                      </div>
                      <div >
                          <div >
                              <input  type="text" autocomplete="address" placeholder="Address"
                                  id="address" name="address" value="">

                          </div>
                      </div>


                  </div>
                  <div >
                      <button type="button"  data-dismiss="modal"
                          onclick="a()">Close</button>
                      <button type="submit" >Add
                          Supplier</button>
                  </div>
              </form>
          </div>
      </div>
  </div>

Code in index.php

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

CodePudding user response：

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

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

CodePudding user response：

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" 
                          onclick="resetForm()" data-dismiss="modal">Close</button>