Using isTouched to show error messages fails with schema
Some confusion with the current handling of
I've adapted the example to show the issue I see: https://stackblitz.com/edit/vitejs-vite-offm7dia?file=src%2FApp.jsx
1. Touch the first optional input (click and blur). Notice the error messages get set for all fields (correct for the onBlur schema).
2. Now try submitting.
3. The user has to touch the individual fields to see the error message. Imagine this UX in the context of a bigger form
Tracing relevant code:
https://github.com/TanStack/form/blob/8672e57a7bea0a7318435d29d22c321d465e0213/packages/form-core/src/FormApi.ts#L1152-L1156
Prior art (formik): https://formik.org/docs/guides/form-submission#frequently-asked-questions
How do others solve this? Am I using tanstack-form incorrectly? Happy about feedback! Thanks for making the library, I find it the most powerful in modern TypeScript projects and I appreciate the considerations every feature gets.
isTouchedI've adapted the example to show the issue I see: https://stackblitz.com/edit/vitejs-vite-offm7dia?file=src%2FApp.jsx
1. Touch the first optional input (click and blur). Notice the error messages get set for all fields (correct for the onBlur schema).
isTouched2. Now try submitting.
isTouched3. The user has to touch the individual fields to see the error message. Imagine this UX in the context of a bigger form
Tracing relevant code:
https://github.com/TanStack/form/blob/8672e57a7bea0a7318435d29d22c321d465e0213/packages/form-core/src/FormApi.ts#L1152-L1156
Prior art (formik): https://formik.org/docs/guides/form-submission#frequently-asked-questions
Why does Formik touch all fields before submit?
It is common practice to only show an input's errors in the UI if it has been visited (a.k.a "touched"). Before submitting a form, Formik touches all fields so that all errors that may have been hidden will now be visible.
How do others solve this? Am I using tanstack-form incorrectly? Happy about feedback! Thanks for making the library, I find it the most powerful in modern TypeScript projects and I appreciate the considerations every feature gets.
GitHub
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, and Lit. - TanStack/form
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, and Lit. - TanStack/form
