ambitious-aqua

Using isTouched to show error messages fails with schema

Some confusion with the current handling of isTouched brought me here. I'm using this meta property to surface the error message for the user at the right time. 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). isTouched is correctly set to true for the first field and hence the relevant error message is visible. 2. Now try submitting. isTouched isn't updated for the second or third input field. The error message aren't displayed. The user gets lost. 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

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.

Leonhard Melzer

StackBlitz

Example "Touched" definition in documentation is wrong tanstack/for...

example for https://github.com/TanStack/form/issues/1169

Form Submission | Formik

GitHub

form/packages/form-core/src/FormApi.ts at 8672e57a7bea0a7318435d29d...

🤖 Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, and Lit. - TanStack/form

11 Replies

optimistic-gold•7mo ago

Touching the forms before submit would be a great idea but I don't know if this behaviour would be naturally understood by devs. I get the philosophy behind it and feel that it's relevant to have this feature. However, one good and simple way to implement this would be to do this: https://stackblitz.com/edit/vitejs-vite-qtvagxcg?file=src%2FApp.jsx Here, we subscribe to the submission attempts

const isSubmitted = useStore(
    form.store,
    (state) => state.submissionAttempts > 0
  );

const isSubmitted = useStore(
    form.store,
    (state) => state.submissionAttempts > 0
  );

and do our checks based on that information:

{isSubmitted && field.state.meta.errors.length > 0 ? (
                  <p style={{ color: 'red' }}>
                    {field.state.meta.errors
                      .map((error) => error.message)
                      .join(', ')}
                  </p>
                ) : null}

{isSubmitted && field.state.meta.errors.length > 0 ? (
                  <p style={{ color: 'red' }}>
                    {field.state.meta.errors
                      .map((error) => error.message)
                      .join(', ')}
                  </p>
                ) : null}

The other approach I can think of would be to get rid of the form-level onBlur validator (and just have an onSubmit validation) and have the onBlur validator in the field-level checking for formSchema.shape.optional.safeParse(value.optional)).success Let me know if you think either of these approaches are good enough or whether we should consider setting isTouched to true everytime a submission occurs.

theVedanta

StackBlitz

Example "Touched" definition in documentation is wrong tanstack/for...

example for https://github.com/TanStack/form/issues/1169

ambitious-aquaOP•7mo ago

Touching the forms before submit would be a great idea but I don't know if this behaviour would be naturally understood by devs.

Coming from react-hook-form I had the mental model it would work like this 🙂 Thanks for taking the time to answer @theVedanta! Really cool idea with the isSubmitted store selector, I think this is what I want. I'll integrate that. 🙌 This fixes the issue we are facing. I need to subscribe in several child components (FormLabel, FormMessage) but that is fine for now I still think the isTouched computation is a little off and from https://github.com/TanStack/form/issues/1169#issuecomment-2681434487 I was thinking the behavior is intended to mimic what Formik / RHF are doing.

optimistic-gold•7mo ago

aha! I didn’t think in those terms because I’ve only been using the tanstack form 😅 sorry That makes sense, we can ask the maintainers about mimicking this behaviour. Personally I too feel that the isSubmitted approach is not something that would naturally come to mind, so touching the fields would be easier would love your input here! @crutchcorn

crude-lavender•7mo ago

I think largely the issue is when you blur the field you’re introducing an error which sets form.canSubmit false. So when you submit, that code you referenced which touches all fields can’t run as there’s a condition above that for canSubmit. There should be an issue or discussion about adding something like an “allowSubmitOnInvalid” attribute which would basically allow bypassing the canSubmit check. This would then touch your fields thus surfacing the error. Haven’t seen if there’s any updates on that though. For my forms I’m basically surfacing errors if touched or submissionAttempts > 0 which is kind of hacky imo

crude-lavender•7mo ago

See https://github.com/TanStack/form/issues/1219

GitHub

Cannot revalidate full form when there is already an error · Issue ...

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 th...

crude-lavender•7mo ago

~~If maintainers want this feature I’m happy to make a PR for it~~ There's actually a PR by someone else out for it: https://github.com/TanStack/form/pull/1234

GitHub

feat(form-core): add canSubmitWhenInvalid form option by matthias...

Allows to submit a form when invalid with the new canSubmitWhenInvalid form option. Resolves #1109.

ambitious-aquaOP•6mo ago

Thanks for linking the issue! Exactly what I do now. That works alright for now 🙂

other-emerald•6mo ago

Kudos to @theVedanta for jumping in a call with me and help me workaround some issues. Really appreciated!

optimistic-gold•6mo ago

oh of course dude, happy to be there.

helpful-purple•6mo ago

Thanks so much for being an awesome contributor @theVedanta

optimistic-gold•6mo ago

:)))

Gaming

Programming

Using isTouched to show error messages fails with schema

Did you find this page helpful?