Prenvent double submission on forms while maintaining form validation

I’d like to prevent my form from being submitted twice (ie double click or impatient user).
I’d like to maintain form validation like required fields or email format verification that happen on submit.

I’ve tried disabling the button on click, but if there is an error, there is no way of re-submitting.

  • Does anyone have a solution to solve my problem?
  • Is there in Cake a callback on submitting a form? If there is no error on the form => disable button and submit?

I hope you can help.

Thats called debouncing. You will find plenty of JS solutions out there depending on what you already use.

CakePHP’s error system requires you to submit the form though since it returns the whole HTML again with the errors underneath the form input. There is no built in client input validation besides the usual HTML stuff.

Hi Kevin,
Thanks for your answer. I’ve actually found plenty of ressources very useful when dealing with api calls. Unfortunately I did not find a solution that matches my situation, specially if I want to change my button text with btn.innerText = 'Saving data...' on submission

Is there anything you could do with a unique value in the form data? The server could use this value to see if it already has seen the value (and hence, a post from that form).

You could cache the value for a reasonable length of time or put it in the session.

Although you are writing your application using Cake, there’s nothing Cake-specific about what you’re asking here. It’s all purely JS. You might need your JS to match the naming conventions that Cake uses for attributes (e.g., id) in the HTML that it generates, or else tweak your Cake code to have it generate something that better fits the JS you want to write.

When you ask if Cake has a “callback on submitting a form”, I think you’re confusing PHP and JS a bit. It seems like you’re looking for something that runs in the browser, but Cake is PHP code, and runs only on the server. Cake will not see the data until it’s POSTed.