Loading spinner disables HTML5 required attribute

I have submit button (bootstrap) where i submit some data from input fields to my PHP query. I have added to this submit button a loading spinner after the button has been clicked by the user. Since i have added the spinner id to the button the HTML attribute for “required” is not longer working. It does not indicate the user a missing information anymore.

Example:

  $(document).ready(function() {
      $("#load").click(function() {
          // disable button
          $(this).prop("disabled", true);
          // add spinner to button
          $(this).html(
              `<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
          );
          $("#save").submit();
      });
  });

<form method="post" action="" id="save">     
  <input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input>
  <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button>
</form>

Answer

Perhaps you should listen the submit event instead of click?

$(document).ready(function() {
    $("#save").submit(function(e) {
       // disable button
       $('#load').prop("disabled", true);
       // add spinner to button
       $('#load').html(
          `<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
       );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="" id="save">     
  <input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input>
  <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button>
</form>