How to enable autovalidation only after first submit?

[da1z]

Is it possible to keep form unvalidated until first submission? something like enableAutoValidationAndValidate() in submit ?

[theVedanta]

Just have a validator in the form-level and maintain a ref for submission count? There does exist a submissionAttempts property too. I don't know if support for this is widely demanded

[da1z]

i do not think this is very unusual case. for example react hook form you can do it with setting mode to onSubmit https://react-hook-form.com/docs/useform#mode and revalidate mode onChange https://react-hook-form.com/docs/useform#reValidateMode

[Balastrong]

I would probably set this logic directly into the form validator. There's a submissionAttempts counter you can access through formApi

  const form = useForm({
    validators: {
      onChange: ({ formApi }) =>
        formApi.state.submissionAttempts > 0 ? yourValidator : undefined,
    },
    ...
  });

[da1z]

@Balastrong not quite the same. maybe I did not explain it correctly. I do want to validate all fields on first submit but i do not want each field onChange validation to kick in until I try to submit form.

[theVedanta]

i do not think this is very unusual case. for example react hook form you can do it with setting mode to onSubmit https://react-hook-form.com/docs/useform#mode and revalidate mode onChange https://react-hook-form.com/docs/useform#reValidateMode

Ah, thank you for sharing additional context on this. I kind of understand the behaviour you're looking for. But to be sure, can you please provide additional explanation on what behaviour/functionality you expect?

@Balastrong not quite the same. maybe I did not explain it correctly. I do want to validate all fields on first submit but i do not want each field onChange validation to kick in until I try to submit form.

Not getting this idea entirely. Maybe share a stackblitz of the expected behaviour/functionality?

Appreciate your help.

[Balastrong]

You can use a combination of submissionAttempts and onChange/onSubmit validators, but I'm still not sure I understood the use case right

[da1z]

i have password reset form where user requires to enter two passwords, password field has validation length 8 chars, confirm password has validation that it matches with first field.

I want user to be able to fill in both fields and click submit before seeing any errors.

basically i want first form validation to happen when onSubmit, but I want it to revalidate each field onChange after first onSubmit validation

[da1z]

here is simple example. I actually want to switch from mobx and formstate to tanstack formstate and this is very common pattern i use in my forms. formstate has example of it https://formstate.github.io/demos/all/app-4.html it achieved by disabled form validation completely and then doing validate onSubmit and enabling auto validation

[theVedanta]

I get it now.

const form = useForm({
  validators: {
    onChange: ({ formApi }) =>
      formApi.state.submissionAttempts > 1 ? yourValidator : undefined,
    onSubmit: ({ formApi }) => formApi.state.submissionAttempts == 1 ? yourValidator : undefined
  },
});

This is the kind of thing you're looking for, right?

Unfortunately, this is the only way you can achieve this with tanstack/form right now, based on my review. I can raise a PR about making additional functionality like the mode/reValidateMode options.

[da1z]

@theVedanta thanks! i would appreciate if it could be made in more simplified way like with mode/reValidateMode, so if you have time to make PR for it. it would make my life easier

[aaronfulkerson]

I get it now.

const form = useForm({ validators: { onChange: ({ formApi }) => formApi.state.submissionAttempts > 1 ? yourValidator : undefined, onSubmit: ({ formApi }) => formApi.state.submissionAttempts == 1 ? yourValidator : undefined }, }); This is the kind of thing you're looking for, right?

Unfortunately, this is the only way you can achieve this with tanstack/form right now, based on my review. I can raise a PR about making additional functionality like the mode/reValidateMode options.

This is a useful example but let's say I want to use a Zod validation schema in place of yourValidator. How would that look?

[aheidelberg]

I would also like to see the behaviour @da1z described implemented (at first validate only on submit, then after the first submit validate onChange) with support for Zod and similar tools as well.

What would be an even better UX I think though is validation that happens for each field after that field has been in a valid state at least once. For example with a text input with a minimum required length of 5 the user would not see an error message until he enters 5 characters at least once. At that point validation for only this field is activated, if he then deletes a character, going below 5, the error message shows up. All regardless of the submission counter.

This can of course also be implemented by the library user right now by tracking for each field if it has been in a valid state manually but a built-in way would be cool.

[pedroscosta]

I get it now. const form = useForm({ validators: { onChange: ({ formApi }) => formApi.state.submissionAttempts > 1 ? yourValidator : undefined, onSubmit: ({ formApi }) => formApi.state.submissionAttempts == 1 ? yourValidator : undefined }, }); This is the kind of thing you're looking for, right? Unfortunately, this is the only way you can achieve this with tanstack/form right now, based on my review. I can raise a PR about making additional functionality like the mode/reValidateMode options.

This is a useful example but let's say I want to use a Zod validation schema in place of yourValidator. How would that look?

Anyone has an working example of this using Zod?

[JakubFaltyn]

Honestly, I'm surprised that you guys pushed Tanstack Form to v1 without the possibility of handling this case. This single issue is preventing us from implementing the best UX practices in form handling.

[onyedikachi23]

I reported for a similar issue here.

The solution I was given was this:

Utilize the field meta state to prevent untouched fields from showing errors. isTouched, isValid and isBlurred to mention three.

But this is inefficient because the validation still happens in background, and this won't permit showing of errors on form submit.

[nenozii]

I had similar issues with TanStack form. That's why I rather prefer using React Hook Form instead.

[crutchcorn]

We now fully support this in a trivial implementation on the userland side of things:

https://tanstack.com/form/latest/docs/framework/react/guides/dynamic-validation

(and this supports all frameworks and is documented for them all)