Validation onSubmit does not re-trigger with conditionally rendered fields
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 682
- Avg merge
- 5d 18h
- Merged PRs (30d)
- 7
Description
Describe the bug
The onSubmit validator is not re-triggering after first time when a "dynamic" field has changed. In this case I'm using Zod's discriminated union to decide whether to show this or that field, but this bug happens also when using for example a superRefine to conditionally validate a field. The first submit triggers correctly the onSubmit validator, but then if we change the field and show the other input field and submit again, it does not work trigger the validator. Even with canSubmitWhenInvalid: true.
There is a similar issue #1780 that points to this error but it's not actually the same. In that issue the author resolved the issue just putting canSubmitWhenInvalid: true, but actually the problem we have found is in the validation not getting triggered.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-form-q2pndiqf?file=src%2Findex.tsx
Steps to reproduce
- Click on Submit -> Should show the error for
thisField - Change the Select to the value That
- Click again on Submit -> Should show the error for
thatField, but it does not.
If we change the validators to run on onChange, it works!
It works also if after submitting you change an input or on blur.
Expected behavior
I would expect that the onSubmit validator would run on submitting the form and it would have the same result of the onChange schema validation
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: MacOS
- Browser: Chrome
- Version: 142.0.7444.60
TanStack Form adapter
react-form
TanStack Form version
1.25.0
TypeScript version
5.9.3
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz minimal reproduction and follow the submit sequence: submit once, change the conditional field, then submit again. Trace the React form validation path and compare onSubmit with onChange behavior; done means the second submission validates the newly rendered field consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100