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

Wizard example bug - validation between steps

Open
#664 11 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**?

🐛

### 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

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.