禁用表单提交按钮，不阻止 HTML5 验证

Question

希望大家在我拔头发时能提供帮助。 我需要在点击后禁用按钮，因为我的一些可爱的用户喜欢点击按钮：

目前，如果他们尝试在未完成字段的情况下提交，表单将显示 HTML5 验证错误（两个字段都是必需的）。 但是，我实现的任何内容，onclick，onsubmit，使用 JS 禁用按钮的所有内容都意味着 HTML 验证不再运行。 我已经在表单和按钮上尝试过它，使用事件函数调用和事件侦听器。 我难住了。

我知道我可以用 JS 完成验证，但如果我可以使用 HTML5，我真的不想这样做； 复制现有功能有什么意义......？ 这是可能的，还是我需要从 JS 的角度添加验证？

过了一会儿，我想取消禁用按钮，让他们有机会响应验证错误（如果适用），否则到那时表单应该已经提交并且服务器正忙于处理发布数据。 就像是：

$("#submit_button").prop('disabled', true)
setTimeout(() => {
    $("#submit_button").prop('disabled', false)
}, 2000)

编辑：我被告知，通过禁用按钮，它禁用了进行 html5 验证的能力。 那么如何阻止用户多次点击按钮而不禁用它呢？

Answer 1

您可以关闭指针事件，而不是禁用按钮：

$("#submit_button").style.pointerEvents = "none";

或者更好的是，向按钮添加一个类，它会更改颜色，使其看起来被禁用（在其上放置不透明度）并添加 pointerEvents 属性。

#submit_button.disabled{
  opacity:.5;
  pointerEvents:none;
}

Answer 2

上面的@Raqha 暗示了答案，但代码略有偏差。 事实上，暂时关闭指针是要走的路。 谢谢！

所以这段代码：

$('#submit_button').click(e => {
    $("#submit_button").addClass('disabled')
    console.log($('#' + e.target.id).parent('form').children('input'))
    setTimeout(() => {
        $("#submit_button").removeClass('disabled')
        console.log('UN-DISABLED')
    }, 2000)
})

使用这个 CSS：

button.disabled {
    pointer-events: none;
}

button.enabled {
    pointer-events: all;
}

显然，您可以根据需要更改按钮文本或添加微调器，同时禁用以根据需要建议提交。 感谢互联网的窥视😺