possible onMount & onChange validation errors bug
I am trying to use onMount and onChange validators with my Zod schema in order to, well, "always" validate the form inputs. I was playing with the official Form and Field validation example in Stackblitz and I ended up in a weeird behaviour: The error messages of the non-edited field are duplicated. I guess this is a bug, right? The picture shows the initial state of the form, which is correct. As soon as you edit one field, e.g. the first one, the second field shows its error message twice! Same issue occurs if you edit the second field first: the first field shows its two error messages twice 😵💫
Link to stackblitz reproducible example
https://stackblitz.com/edit/tanstack-form-pobqx3yj?file=src%2Findex.tsx
10 Replies
xenial-blackOP•3w ago
I guess that the onMount and onChange validators are not supposed to be used at same time, but I would like to validate the form initally...
wise-white•3w ago
well, the simple solution to this is to keep both validators, but only show unique messages per line
the more complicated one would be to clear the mount validation on any change before the schema for onchange runs, but I think it's overkill for a zod schema
xenial-blackOP•3w ago
Hmmm yeah this would be a sollution, but do you think this should be considered a bug?
wise-white•3w ago
no? because you have both validators active at the same time, each one with their own error
essentially, you're trying to avoid a situation where a user blurs a field, but didn't change a value, right?
if so, then you could use
isTouched and hide errors if it's false
isTouched is looser than isDirty, since it only checks if the user has interacted with the field somehow
hmm, I guess this still leaves duplicate errors though ...xenial-blackOP•3w ago
I was trying to use
onChange only, but since a form with invalid inital validation is considered valid I am trying to use onMount too 😭wise-white•3w ago
why not use
isPristine to check if the form has been interacted with?
it would force the user to change one value, triggering validation
besides, even if they tried submitting without changing anything, all validators run first, catching problematic fieldsxenial-blackOP•3w ago
Because the form may be initially valid... well I could check which forms will be initially invalid and add the
isPristine check, but this is not ideal too
hmmmmmmmmmmmmmmmm you mean I could use onChange only?wise-white•3w ago
if your only concern is not submitting invalid data, absolutely
the submission validation order is change, async change, blur, async blur, submit and async submit
xenial-blackOP•3w ago
But using
onChange only, the state.isValid value could be true for invalid forms. I understand that as soon as something changes, the validation will tell the form that isValid should be false 🥸 I am using isValid to disable the submit button, so the user will think that the invalid form is valid. After clicking the button the errors will show up, but this is not ideal too 😭wise-white•3w ago
you can flip the script for this too. I open a form and the submission is disabled, and I have no idea why
because I haven‘t interacted with anything
clicking the submit button is feedback for the user, just like touching a field is
in this case, checking unique messages is good enough because the schemas will generate the same message
so if the initially disabled button works better for your use case, then it should be alright