How do you handle multi-step, route-based forms?

[egmanoj]

I'm trying to figure out how to best handle multi-step, route-based forms. Each step of the form is associated with a route, and each step is validated independently. Ideally I'd like a single form, with partial validation per step. Is this possible? Does anyone here have experience with such a case?

[hairychris]

There is another library called Winterfell that might be worth looking at: https://github.com/andrewhathaway/Winterfell

As for redux-form I don't know sorry buddy.

[egmanoj]

@hairychris Thanks, I've seen Winterfell. I'd like to go with Redux(-form) as much as possible.

[erikras]

That seems doable. How about something like this?

@reduxForm({
  form: 'myBigForm',
  fields: [/* fields on first page */],
  destroyOnUnmount: false,    // <------ preserve form data
  validate: validateFirstPage // <------ only validate fields on first page
})
class FirstPage extends Component {
  // render first page of inputs
  // handleSubmit forwards to next page
}

@reduxForm({
  form: 'myBigForm',           // <------ same form name
  fields: [/* fields on second page */],
  destroyOnUnmount: false,     // <------ preserve form data
  validate: validateSecondPage // <------ only validate fields on second page
})
class SecondPage extends Component {
  // render second page of inputs
  // handleSubmit forwards to next page
}

@reduxForm({
  form: 'myBigForm',           // <------ same form name
  fields: [/* all fields */],
  validate: validateAll        // <------ validate all fields
})
class FinalPage extends Component {
  // render last page of inputs
  // handle submit actually submits data
}

[egmanoj]

@erikras That looks very promising. Will try it out. Thanks.

[erikras]

Great. Please report back.

[egmanoj]

@erikras: Yes! This worked, and nicely 👍

[erikras]

Awesome!

[erikras]

FYI, for anyone reading this ticket in the future. Here's a working example of my suggestion above: Wizard Form.

[egmanoj]

This is awesome. Thanks!

[dankoknad]

@erikras Thank you for an example (a link url has been changed).