form
form copied to clipboard
Cannot revalidate full form when there is already an error
Describe the bug
I have a form with optional fields that may be mandatory depending on another field. I want to validate the form entirely by clicking on the submit button. When I first validate the form, a text input field is in error. I then select item 3 in the select box and check the 3rd checkbox, which makes the date fields mandatory, but when I click on the submit button the form isn't revalidated because there's an error in the text field. If I enter a value in the input text and submit the form, I get the error in the date fields.
I'd like to be able to revalidate the whole form even if there's already an error.
You can find a discussion about that on discord https://discord.com/channels/719702312431386674/1346173728018399303
Another dev thinks it's because the validateAllFields function is called after check of the canSubmit value. https://github.com/TanStack/form/blob/72b4572ed644f6699eacb186fdd6c2f536c73219/packages/form-core/src/FormApi.ts#L1594
Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-vya6grtl?file=src%2FApp.tsx
Steps to reproduce
- Select Item 3.
- Submit the form.
- Check the 3rd checkbox.
- Submit the form.
Expected behavior
I expected the error message to be displayed for date fields but it doesn't.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- Mac OS
- Chrome
- Version 133.0.6943.142
TanStack Form adapter
react-form
TanStack Form version
v1.0.0
TypeScript version
v5.7.2
Additional context
No response