Relaunch validation even if there is already an error, and reset validation of certain fields
Hello,
I have a form with checkboxes and 2 date fields. Date fields are required only if the third checkbox is checked (this checkbox can be selected only if you choose the item 3 in the select).
The first problem is when I select the item 3 without value in the input at the right and validate the form there is an error, it's ok. But when I check the third checkbox, date fields are now required but if I submit, the error is not displayed because there is already an error on the input field. Is it possible to revalidate all the form on submit even if there is already an error ?
The second problem is when I filled the input and I unchecked the third checkbox, the date fields error is still here, I would like to remove it because dates are no longer required ? Is it possible ?
Here you can find the stackblitz with the demo projet https://stackblitz.com/edit/vitejs-vite-vya6grtl?file=src%2FApp.tsx
Hope someone can help me. Thanks 🙂
10 Replies
jolly-crimson•7mo ago
When you're hitting submit, the validations aren't running again because canSubmit is remaining false:
https://stackblitz.com/edit/vitejs-vite-9efkpnyx?file=src%2FApp.tsx
1. select item 3
2. select checkbox 3
3. fill in value for entryValue
4. click submit (so you see initial errors on dates)
5. uncheck checkbox 3
At this point we'd imagine canSubmit should be true, but it's false.
Here you can see that since it's false:
https://github.com/TanStack/form/blob/72b4572ed644f6699eacb186fdd6c2f536c73219/packages/form-core/src/FormApi.ts#L1594
we won't revalidate.
Unsure if we should actually allow revalidating fields even if canSubmit is false?
I think the call to validateAllFields should be moved above that. Not 100% sure why this isn't the case, seems like you'd always be stuck :/
A workaround for now is to trigger the validation manually with your listener.
Might want to raise an issue IMO to get clarification.
juanvilladev
StackBlitz
Tanstack form validation (forked) - StackBlitz
Next generation frontend tooling. It's fast!
GitHub
form/packages/form-core/src/FormApi.ts at 72b4572ed644f6699eacb186f...
🤖 Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, and Lit. - TanStack/form
conscious-sapphireOP•7mo ago
Great, thanks for your help 🙂 I will create an issue about that to know if this is the desired behavior, and if it is, what is the best practice for revalidating the entire form when submit is clicked.
jolly-crimson•7mo ago
I doubt its the desired behavior honestly
robust-apricot•7mo ago
It is.
We'll add a feature to bypass this tho, should be super trivial
jolly-crimson•7mo ago
Gahh darn yeah I'm trying to recreate it in a small stackblitz to see if I understand this correctly!
jolly-crimson•7mo ago
https://stackblitz.com/edit/vitejs-vite-9efkpnyx?file=src%2FApp.tsx
Here I don't replicate the issue for some reason, if I submit once with field empty I see error but if I type more than 5 chars, the error gets cleared? Wonder why it gets cleared if we only use a onSubmit validator?
juanvilladev
StackBlitz
Tanstack form validation (forked) - StackBlitz
Next generation frontend tooling. It's fast!
jolly-crimson•7mo ago
OHHHHH this is where the error is cleared:
https://github.com/TanStack/form/blob/72b4572ed644f6699eacb186fdd6c2f536c73219/packages/form-core/src/FormApi.ts#L1362-L1380
GitHub
form/packages/form-core/src/FormApi.ts at 72b4572ed644f6699eacb186f...
🤖 Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, and Lit. - TanStack/form
jolly-crimson•7mo ago
So on change IF an error exists that was appended via onSubmit it'll be re-evaluated
robust-apricot•7mo ago
I'm not even gonna be able to investigate this before @juanvilladev ends up making a PR to add the feature, huh? xD
jolly-crimson•7mo ago
Haha was curious why the submit errors were being cleared, I recently updated the validateSync so sort of knew where to look