Form validation defaults

[szymon-99]

Hi guys, I would like to know how to replicate the defaults from react-hook-form in tanstack-form.
In the docs I only found one example with validation defined in onChange that runs on form level. Unfortunately it runs all validators immediately after user starts typing which to me is not the best user experience https://tanstack.com/form/latest/docs/framework/react/examples/large-form

What I would like to achieve is to define one zod schema, that will validate the form but only after form is initially submitted => then I would like to validate as user types so basically this is default from react-hook-form
example https://codesandbox.io/p/devbox/react-hook-form-with-zod-forked-vg3n4y?file=%2Fsrc%2FApp.js%3A37%2C32

Is it easy to achieve in @tanstack/react-form or rather requires a lot of effort? I would be grateful for any basic example that can replicate it. Thanks a lot!

[Balastrong]

Is this something similar to what you're looking for?

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

If you're validating with a schema library like zod or valibot, you can use formApi.parseValuesWithSchema(yourSchema) as yourValidator in the snippet above

[ammarmbe]

the errors don't map to their fields when using a standard schema library with this approach

[ammarmbe]

the errors don't map to their fields when using a standard schema library with this approach

fixed by wrapping the schema with formApi.parseValuesWithSchema()

[Balastrong]

formApi.parseValuesWithSchema() is indeed the best way if you have a schema, we didn't have that api yet when I answered :)

I'll update the answer

[juanvilladev]

React Hook Form by default does not append errors form the form level schema unless the user actually touches the field. This makes it so users can't really control when the error is appended (They abstract that away). TSF differs in that we ALWAYS append the errors to the corresponding errorMap/errors array for each field.

You then have full control of when to display the error by using field.isTouched or similar to what Balastrong suggested using form.state.submissionAttempts.

[dd-jonas]

I'm also interested in a better way to achieve this with Tanstack Form. The current workaround isn't really developer friendly as you have to repeat your validator twice, and repeat it every time you use useForm.

[Balastrong]

You can create an helper function that returns a validators object with all your custom logic and reuse that in your useForm instances.

[dd-jonas]

@Balastrong That's true, thanks. I get that TanStack form is more flexible than RHF with the way validators work, so a revalidateMode prop like RHF wouldn't fit in the API.

I also want to point out (for anyone else reading this) that I like the RHF approach of validating onChange after the first submit for two reasons:

1. The initial error disappears when the user fixes their mistake.
2. The user continues to see any other errors that may occur ("First name is required" -> "First name must be at least 3 characters")

When I played around with TanStack Form examples, I noticed that field errors from the onSubmit validator are cleared when you edit the field. This solves my first point above, and for me is actually "good enough" for most simple forms. With RHF, if both modes are set to onSubmit, the errors would remain visible until you resubmit. I thought this was important enough to point out, as I haven't seen this behavior mentioned in the docs.