Using both `onMount` and `onChange` validators on a field doesn't work

[oscartbeaumont]

Describe the bug

Providing both an onMount and onChange validators to form.Field does not run validation on change events.

For some reason removing the onMount validator, causes the onChange validator to work correctly.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-cgm7xb?file=src%2Findex.tsx

Steps to reproduce

Type more than 2 characters into the input field and notice the error doesn't go away despite a onChange validator being applied.

Now comment out the onMount validator and notice the onChange validator works, but obviously you get no error on initial load.

Expected behavior

Typing more than 2 characters into the input field should cause the validator error to go away with both the onMount and onChange validator defined.

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/user-attachments/assets/1727e044-2515-465d-9f1f-a5a7c73d09ae

Platform

Reproduced in Stackblitz so N/A.

TanStack Form adapter

solid-form

TanStack Form version

v0.29.1

TypeScript version

v5.4.2

Additional context

It looks like onMount's validator error is just never cleared on user input. It's possible this is expected behavior and if so would you know if I can workaround this?

[oscartbeaumont]

Okay I actually think this issue is different than I originally thought.

My assumption would be that all previous validation errors are cleared when running the next validation but that doesn't seem to be the case.

So onMount returning an error means the error will always exist and onBlur returning an error is only cleared on the next blur event.

Can I confirm if this is expected behaviour or not?

[Balastrong]

I also think there's something we should look at with the onMount validator. Some time ago I started exploring a possible option that is removing the mount validation as soon as a field is touched (#726) but I also like your idea of removing all validation errors of a field as soon as any of its validators kicks in.

Maybe this can also be configured with an optional flag for the validators object? Looking for feedback :)

[oscartbeaumont]

I have opened #907 with an implementation behind a configuration flag.

[EyMaddis]

More annoyingly it onMount will keep the initial state forever. So even form.validate('mount') will effectively no nothing based on user input

[vdvukhzhilov]

Is anything being done to resolve stuck onMount validation error?

[Balastrong]

Fixed with #726 (version 0.34.4)

[tecoad]

@Balastrong I am having an approach very similar to this on the latest.

Passing validator on both onChange and onMount, makes the validation ocurr on mount but breaks validation on change, specifically when using a zod schema when refine.

[Subtletree]

I'm also running into this. I found this relevant discord question and stackblitz too:

https://discord.com/channels/719702312431386674/1100436934205124660/threads/1347161387071442965 https://stackblitz.com/edit/vitejs-vite-ynrth1qu?file=src%2Fcomponents%2Ftext-fields.tsx

Version 1.14.1