Prevent duplicate form submission

Created on 19 October 2023, about 1 year ago

Problem/Motivation

If a user rapidly clicks on form submission (or double clicks on the submit form) the form is submitted twice. Clientside validation already takes over form submission, but doesn't prevent this behaviour.

Steps to reproduce

Create any form, submit the form by double-clicking on the submit button. The request is sent twice to the server.

(For bonus points, add a Google CAPTCHA to the form. The first form submission goes through, but the second does not (CAPTCHA was not provided), prompting the user to fill out the form over and over again even though they already did so successfully.

Proposed resolution

There should be a mechanism, either in custom code or in the UI for preventing double clicks in form submission, in a way that doesn't break clientside validation.

(Before installing clientside validation, I had resolved this by disabling the button after selection with an onclick, but this breaks clientside validation if invalid data is entered: Clientside validation intercepts the request and scrolls the user up to the offending field, but then they can't submit the form again)

If there's a way to do this already, I'd love to know! If not, this might graduate to a feature request.

💬 Support request
Status

Active

Version

4.0

Component

Code

Created by

🇨🇦Canada TrevorBradley

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024