Bootstrap JavaScript for disabling form submissions if there are invalid fields & the rest form is not working as intended

I am using the bootstrap version 4. Index.php includes the below contact form. I want users to see the validation messages when they click submit to draw their attention to the required fields they have missed. For example, when a user hits submit without filling any field, the user sees the below, which is the behavior I want to achieve, and I currently have:

[please note that to save space in this post, all images can be shown by clicking on run code snippet]

<img src="https://i.stack.imgur.com/h1KwJ.png" width="50%" height="50%" />

The contact form: Index.php

<!DOCTYPE HTML> 
<html>
<head>
    <title>Contact form</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<body>

<div class ="container">

<div class="col-lg-6 push-lg-3">

<h1> Contact us</h1>
<p>Fill out the below form to contact us</p>

<form id="contactForm" class="contact-form needs-validation" action="form.php" method="POST" novalidate>
    <div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
        <strong>Success!</strong> Your message has been sent to us.
    </div>

    <div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
        <strong>Error!</strong> There was an error sending your message.
        <span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
    </div>
    
    <div class="form-row">
        <div class="form-group col-lg-6">
            <label for="name" class="required font-weight-bold text-dark">Full Name</label>
            <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
        </div>

        <div class="form-group col-lg-6">
            <label class="required font-weight-bold text-dark">Email Address</label>
            <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <label class="font-weight-bold text-dark">Phone</label>
            <input type="text" value="" data-msg-required="Please enter the phone number." maxlength="100" class="form-control" name="phone" id="phone" required>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <label class="required font-weight-bold text-dark">Message</label>
            <textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control" name="message" id="message" required></textarea>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <div class="g-recaptcha" data-sitekey="Your_Public_Key"></div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
        </div>
    </div>
</form>
</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="js/jquery.validate.min.js"></script>
<script src="js/view.contact.js"></script>


<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
    'use strict';
    window.addEventListener('load', function () {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          else {
            $("#submit-btn .text").text("Enviado");
            $("#submit-btn").addClass("active");
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>


<script>
$("#contactForm").validate();
</script>



</body>
</html>

The issue

I have the issue that when the user hits submits, everything goes as planned, and the form refreshes, and the success message appears, but the form refreshes with validation showing red boxes, which is the problem I want to solve. This is how a successful form submission currently looks like and this is incorrect:

<img src="https://i.stack.imgur.com/eV7A6.png" width="50%" height="50%" />

When the user hits submit, I want the user to see the success message; I want the form to refresh without green or red boxes to the input fields. To better understand this, please have a look at the below behavior I want to achieve:

<img src="https://i.stack.imgur.com/0Yf01.png" width="50%" height="50%" />

I know that the issue is in the JavaScript for disabling form submissions (above) or in the view.contact.js:

I appreciate any insights or guidance about how I can fix this.

One more question I have is this: Will I need the below code?

<script>
$("#contactForm").validate();
</script>

Any comment on how to make this code better is highly appreciated.

Answer

From the official documentacion:

To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the again after submission.

Bootstrap > Form > Validation > How it Works

In your case, you need to add the following line:

$form.removeClass('was-validated');

Inside:

$.ajax({...})
.done(function() {
    //HERE
),
.always({...});