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

Question

Hoping people can help as I'm pulling out my hair. I need to disable the button after clicked because some of my lovely users love spam-clicking the buttons:

At the moment, if they try to submit without completing a field, the form displays the HTML5 validation errors (both fields are required). However anything I've implemented, onclick, onsubmit, everything that uses JS to disable the button means that the HTML validation no longer runs. I've tried it on the form and on the button, using on event function calls, and with event listeners. I'm stumped.

I know I can complete validation with JS, but I don't really want to have to if I can use HTML5; what would be the point duplicating existing functionality...? Is this possible, or do I need to add the validation from a JS perspective?

After a little while I'm then wanting to un-disable the button to give them chance to respond to the validation errors (if applicable), otherwise by then the form should have submitted and the server is busy chewing on post data. Something like:

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

Edit: I have been informed that by disabling the button, it's disabling the ability to do the html5 validation. So how does one stop users clicking the button multiple times without disabling it?

Answer 1

Instead of disableing the button, you could turn off the pointer events:

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

or better, add a class to the button, which change the color, so it looks disabled (put an opacity on it) and add the pointerEvents property.

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

Answer 2

The answer was alluded to by @Raqha above, but the code was slightly off. Indeed temporarily turning off the pointer was the way to go. Thanks!

So this code:

$('#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)
})

With this CSS:

button.disabled {
    pointer-events: none;
}

button.enabled {
    pointer-events: all;
}

Obviously you can change the button text or add a spinner as necessary while disabled to suggest submitting if desired. Thanks internet peeps 😺