final-form / final-form/react-final-form
Wizard example bug - validation between steps
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
🐛
### What is the current behavior?
1. Fill in **firstName** and **lastName** to be able to proceed to step 2
2. Don't touch any field, go back to Step 1
3. Don't touch any field, go forward to Step 2 <---- Don't allow me to
- Step 2 is validated at render-time, so it's invalid at the start (check console log to see that `validate()` was called)
- Going back doesn't stop me, even if that step 2 is invalid
- Going forward stops me, even if step 1 is valid (but step 2 isn't)
### What is the expected behavior?
- Allowing me to go to step 2 -> 1 -> 2
- Only validating the current step unless I'm on the last step, then validate the full thing?
### Sandbox Link
Official example from docs:
https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/wizard?from-embed
My version:
https://codesandbox.io/s/wizard-example-iqycj
**What I changed:**
- Removed per-field-validation on `firstName` and `lastName` and handled them in the `validate()` function (same as step 2 validations)
### What's your environment?
`"final-form": "4.18.5",`
`"react-final-form": "6.3.0",`
### Other
I understand that it's up to us to handle the validations, and that final-form only provides the `validate` prop, but as this example is official in your docs, I assume it should work.
Contributor guide
Assessment
This issue has not been assessed yet.