final-form / final-form/react-final-form

Wizard validation doesn't work correctly with page level validation vs field level validation

Open
#812 0 comments 0 reactions 0 assignees View on GitHub
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**?
Bug report

### What is the current behavior?
Current behavior displayed in official Wizard docs here https://final-form.org/docs/react-final-form/examples/wizard

1. type in first name, last name
2. click next
3. type in email, favorite color
4. click next
5. click previous
6. click next
https://final-form.org/docs/react-final-form/examples/wizard
### What is the expected behavior?
I expect to go to the next page (selected employed and toppings), but the page doesn't move forward. Looking through the source code, I figured out that this happens because of page level validation vs field level validation. When using page level validation (providing validator to Wizard.page), I can see that errors in form state don't get reset, which cases the page to not move forward. The errors object in form state should be empty {} when I go back to previous page. It happens with field level validation, but not with page level.
### Sandbox Link
https://final-form.org/docs/react-final-form/examples/wizard

### What's your environment?

### Other information
If you follow these steps
1. type in first name, last name
2. click next
3. type in email, favorite color
4. click next
5. click previous
6. click previous
7. click next
It will work and move page forward, because the very first page of this example form is field level validation and that clears our form error state.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.