添加加载Spinner的Bootstrap提交按钮导致HTML5 required属性失效

问题原因 #

你当前的实现逻辑存在两个核心问题，导致HTML5原生校验失效：

• 点击提交按钮后立刻执行了禁用按钮、替换加载文本的逻辑，没有等待表单校验结果
• 手动调用$("#save").submit()方法会直接跳过HTML5的原生表单校验流程，因此required属性的规则不会被触发，也不会弹出必填提示

解决方案 #

将加载状态的更新逻辑从按钮的click事件迁移到表单的submit事件上即可。HTML5原生校验通过后才会触发表单的submit事件，校验失败时该事件不会触发，也就不会执行加载状态的更新逻辑。

修改后的JS代码如下：

$(document).ready(function() {
    // 绑定表单的submit事件而非按钮的click事件
    $("#save").submit(function() {
        const submitBtn = $("#load");
        // 禁用提交按钮防止重复提交
        submitBtn.prop("disabled", true);
        // 替换为加载状态
        submitBtn.html(
            `<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
        );
    });
});

你的HTML代码不需要做逻辑修改，仅可顺便优化<input>标签的写法（input为自闭合标签，不需要额外写</input>闭合标记），优化后写法参考：

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

内容的提问来源于stack exchange，提问作者Mischa Mustermann