sensitive-blue

How to do sub field validation?

  const form = useZeroAppForm({
    defaultValues: {
      create_user: createUserDefaultValues,

      create_vendor: createVendorDefaultValues,

      vendor_documents: {},
    },

    validators: {
      onSubmit: zod.object({
        create_user: createUserValidator,
        create_vendor: createVendorValidator,
        vendor_documents: zod.object({}),
      }),
    },
  });

  const form = useZeroAppForm({
    defaultValues: {
      create_user: createUserDefaultValues,

      create_vendor: createVendorDefaultValues,

      vendor_documents: {},
    },

    validators: {
      onSubmit: zod.object({
        create_user: createUserValidator,
        create_vendor: createVendorValidator,
        vendor_documents: zod.object({}),
      }),
    },
  });

suppose I have a form like this with multi step, how do I do partial validation? like validate create_user in step 1, create_vendor in step 2 and so on.

2 Replies

eager-peach•3w ago

Hi! I'm probably not the best person to answer this, but I've been fighting with multistep forms recently. Here is a 'working' example of a multi step form as a single form where we validate based on 'sections' and navigate via next/previous buttons. https://stackblitz.com/edit/tanstack-form-yjtaf2ug?file=src%2Ffeatures%2Ftree-house%2Fshared-form.ts&preset=node Checkout features/tree-house/shared-form.ts. In the onSubmit we validate with different schemas based on the section. Personally, I'm not a fan because I had to cast the types which feels all wrong. Ultimately, for our use case I decided to create separate forms and keep track of everything via a state management library. (Our multi step forms will sit inside accordions and users will have relative freedom of going in between steps. I couldn't come up with a 'neat' way to handle all the step navigation complexity in a single form. Plus since we'll have a lot of these multi step forms, it needed to be reusable.)

Nadja

StackBlitz

Tanstack MultiStep Form - StackBlitz

Run official live example code for Form Large Form, created by Tanstack on StackBlitz

ambitious-aqua•3w ago

https://github.com/TanStack/form/issues/419

GitHub

[Feature Request]: Form Groups · Issue #419 · TanStack/form

Description When building a form stepper, like so: It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add c...

Gaming

Programming

How to do sub field validation?

Did you find this page helpful?