form icon indicating copy to clipboard operation
form copied to clipboard

Cannot revalidate full form when there is already an error

Open tduforet opened this issue 8 months ago • 1 comments

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

  1. Select Item 3.
  2. Submit the form.
  3. Check the 3rd checkbox.
  4. 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

tduforet avatar Mar 04 '25 19:03 tduforet