TanStack / TanStack/form

Validation onSubmit does not re-trigger with conditionally rendered fields

Open
#1,874 3 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v1 v2: needs investigation
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
  1. Click on Submit -> Should show the error for thisField
  2. Change the Select to the value That
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.