Search code examples
reactjsreact-final-form

Hide next button until values have been populated in React Final Form Wizard

I'm looking at the Wizard Form Example from React Final form.

I want to adapt the wizard so that it hides the next button until the inputs in the current steps all have values. Bit stumped on how to achieve this.

What I'm thinking is that it should be possible to check what step currently is active and somehow pull the states of the inputs present on that step. If all of the inputs have values, show the button, otherwise hide it.

The idea is to dynamically check inputs present per step (as they might change during the course of development, so nicer to actually look for the inputs present rather than hardcode checks for specific states and if they have values).

Full example is here: https://codesandbox.io/s/km2n35kq3v
(code for buttons are in Wizard.js on line 73)

Solution

  • How about making the values required (with validation rules) and only showing the button when the form is valid?

    See Wizard.js, lines 64, 73, and 74.

    Edit 🏁 React Final Form - Wizard Example

    This is not 100% ideal since your validation might have more complex rules and you won't be able to get the value from a failed submission marking all the fields as touched, but it's close.