加载微调器禁用 HTML5 必需属性

Question

我有提交按钮 (bootstrap)，我可以在其中将输入字段中的一些数据提交到我的 PHP 查询。在用户单击按钮后，我向此提交按钮添加了一个加载微调器。由于我已将微调器 ID 添加到按钮，因此“必需”的 HTML 属性不再有效。它不再指示用户缺少信息。

示例：

  $(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 1

也许您应该监听提交事件而不是点击事件？

$(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>

加载微调器禁用 HTML5 必需属性

Loading spinner disables HTML5 required attribute

html

javascript

php

button

spinner