title: Loading spinner disables HTML5 required attribute
body: <p>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 &quot;required&quot; is not longer working. It does not indicate the user a missing information anymore.</p>
  <p>Example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(document).ready(function() {
        $("#load").click(function() {
            // disable button
            $(this).prop("disabled", true);
            // add spinner to button
            $(this).html(
                `&lt;i class="spinner-border spinner-border-sm mb-1"&gt;&lt;/i&gt; Loading`
            );
            $("#save").submit();
        });
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="post" action="" id="save"&gt;     
    &lt;input class="input" name="passwort" type="password" placeholder="Enter your password here" required&gt; &lt;/input&gt;
    &lt;button type="submit" class="btn btn-lg btn-primary" id="load"&gt; Save &lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>