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

【问题标题】：Loading spinner disables HTML5 required attribute加载微调器会禁用 HTML5 必需属性
【发布时间】：2021-12-26 22:31:04
【问题描述】：

我有提交按钮（引导程序），我在其中将输入字段中的一些数据提交到我的 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>

【问题讨论】：

您正在使用反引号来制作微调器 HTML。为什么不尝试正常的 qoutes？
你的意思是这样的？："加载中"
不，我的意思是这样的：'<i class="spinner-border spinner-border-sm mb-1"></i> Loading'，否则你会得到一个字符串错误。所以不是像 ` 这样的反引号，而是像这样的正常引用：'。
当然我尝试了两种方法，但它没有解决问题。它仍然不表示缺少输入值。
有点小问题，我创建了一个也适用于 Chrome 的版本：jsfiddle.net/5th6dj0g/1

标签： javascript php html button spinner

【解决方案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>

【讨论】：