Create a basic form in React using react-final-form 

Disallow Submitting an Empty Form with React Final Form 'pristine' property

Avoid Submitting a Form Twice with React Final Form 'submitting' property

Use third party components (e.g. React Select) in React Final Form

Validate form values with React Final Form 'validate' function

Create forms in React applications with React Final Form

Re-submitting the form before the previous submit action has finished can lead to all sorts of bugs.

In this lesson we are going to see how we can ensure that users won't be able to resubmit the form before the first submit action has resolved by using `submitting` property from React Final Form render prop.

Instructor: [00:00] We have a form which currently we can reset or submit. In this example, submit is basically a window alert, but in an actual application, it would be a network request or some server.

[00:12] We would like to ensure that, when we submit the form, as long as the form submit action hasn't completed, we would not be able to submit the form again. Again, to achieve this effect, destructure the submitting property from React Final Form.

[00:27] It is a Boolean value which lets us know whenever we are currently in the process of submitting the form or not. We are going to change the onSubmit function to simulate the network request.

[00:39] It's going to return a new promise, which is going to be resolved after a timeout of a second. Inside of here, we're going to put the function that we had before our alert and resolve the promise.

[00:57] Next, use the submitting property to disable the button whenever either on the form is pristine, or we are currently submitting the form. Let's see with an action. By putting our first name and the second name after I click submit, the button is disabled for a second.

[01:15] Right now it's still disabled, because the submitting action hasn't finished yet. As soon as I click OK, I can go ahead and submit the form again. I can also reset it.

Course

Create forms in React applications with React Final Form

Avoid Submitting a Form Twice with React Final Form 'submitting' property

Share this video with your friends