Form Validator onSubmit seems to be ignored if a field validator is also present
I'm not sure if this is a bug or an issue on my side but I have a weird behavior.
I have a
onSubmit form validator to validate all my schema on submit. This work well.
Then I also want to have an onChange validator specific for field where I want to validate while the user type or blur. This also work on the field level.
But whenever I add the onChange validator to the field level, the onSubmit validator is not working anymore.
Here is a stackblitz to reproduce.
https://stackblitz.com/edit/tanstack-form-e1x8v1jk?file=src%2Findex.tsx
See the number field and try to comment the onChange validator.
Am I missing something?
What I would expect, is that on the first submit, the errors would be displayed.14 Replies
fair-roseOP•6mo ago
So the current behaviour, on the first submit, there is just no error displayed and the user will have no way to know what is wrong.
To show some errors we must modify the number field (Without knowing that this is the field which is invalid). Then
canSubmit is true and we can submit again, and only then, the first and last name show the errors.
I also try to put the onSubmit validator on every field instead of at the form level and then I never see any error displayed.
I really think that this is some basic validator workflow and we should be able to do such things quite easily without having to fight with the api.ratty-blush•6mo ago
is this behaviour still happening if you use
useStore to access the errors?
your stackblitz seems a bit strange. You use valibot to validate (which you map to err => err.message), but your field validators return only a string which will resolve to undefined[] and not show any errors.ratty-blush•6mo ago
https://stackblitz.com/edit/tanstack-form-bvykzcwr?file=src%2Findex.tsx implemented useStore and the error inconsistency. Is this the behaviour you were looking for?
LeCarbonator
StackBlitz
Form Standard Schema Example (forked) - StackBlitz
Run official live example code for Form Standard Schema, created by Tanstack on StackBlitz
fair-roseOP•6mo ago
Ok, I didn't know that I have to return something special when using a validator, is it something I missed from the doc? I taught we can always have our own validator even if we use a validator.
I'm looking at your solution right now. thanks
ratty-blush•6mo ago
basically, what you return from your validators is what you will receive in the array.
When using a validator with standard schema, it will be an object with a
message property
If you return primitive strings, that is what you will receive insteadfair-roseOP•6mo ago
Ho I see, the FieldInfo should have been adapted
ratty-blush•6mo ago
so yes, you can always pass your own object types as error, but it will make a union between your schema error objects and your own
fair-roseOP•6mo ago
I think then that the useStore are not even necessary in this simple example. It look to work even without the useStore. But I will now have to dig in my complex form to see if the issue was the same.
If that was the case that was a very silly mistake 😦
hopefully this is the case ^^
ratty-blush•6mo ago
Yeah, I'm not too sure why they are needed and when. I've made a GH issue based on a livestream that talked about it, but it hasn't been resolved yet. https://github.com/TanStack/form/issues/1207
TL;DR the contributors and maintainers suggest that you should use
useStore when accessing field metafair-roseOP•6mo ago
Ok, that's good to know. Maybe a note on why on the doc would be nice (if It is not already yet there). And the example should then be updated
ratty-blush•6mo ago
Yup, that's what the GH issue is for :PepeThumbs:
fair-roseOP•6mo ago
form.AppField (or form.Field) children component we should use useStore instead of accessing directly field.meta attributes?ratty-blush•6mo ago
I've only seen examples doing it in
AppField field components
the custom field components I meanfair-roseOP•6mo ago
I come back on this. If I use the
children props of my <form.AppField Then I get some runtime errors:
So I'm confused on when I should use useStore or not.
In the example there is even a comment that say // Avoid hasty abstractions. Render props are great!
So not sure if we should abstract the children into it own component in order to use useStore
Maybe it is only needed when we create field components using createFormHook
But inside the children prop it should always be reactive.
Ok, going on the my first issue.
I think now I grasp more how it behaves. The validators of the individuals fields are always checked before the form validators are even checked.
This is like a 2 wall validation.
1. First all the fields validations must pass
2. Only then we start to validate the form
What I have experienced:
- The onChange form validation is a little agressive as when I start to type in 1 field, all other field directly get their errors
- The onSubmit form validation is nice as it force the validation only when submitting
- Now I would like to have a onChange field validation for only 1 field (for example) in order to validate that field directly. If I do that then all the other validation will not be triggered.
I believe that is an intentional behavior. But I also think that in some case we would like to have the form and field validation to merge instead of the field validation to block the form validation. But maybe I'm wrong and be very explicit on which field we want to be first validated is a good choice. For now I think I can continue to work as I understand how the library is working. I learn a lot through the struggle. 😄 love it