Support for form wizard

[VaZark]

Is there a way to validate only a subset of a form per step?

usually in a form wizard we show a step at a time but aggregate all the data to one formdata/json element.

it would be cool of we could validate each step immediately but defining a subset of the form validate per page

[esamattis]

You could split your form schema to multiple schemas and use multiple useZorm() hooks on a single form. For that to work you'll need a simple helper to share the form ref with multiple hooks:

function shareRef<T>(...refs: ((el: T) => void)[]) {
  return (el: T) => {
    for (const ref of refs) {
      ref(el);
    }
  };
}

usage

<form ref={shareRef(zo1.ref, zo2.ref)}>

You'll also need to manually manage the form submission events and validation so you can choose which part of the form to validate and when. Eg. set setupListeners: false and add your own submission listener:

    <form
      ref={shareRef(zo1.ref, zo2.ref)}
      onSubmit={(e) => {
        e.preventDefault();
        // Select what to validate and when

        if (formStep === 1) {
            zo1.validate();
        else {
            zo2.validate();
        }
      }}
    >

Or you could also make just a button "Go to next step" which calls the current validation and displays the next part of the form if the validation succeeded. The .validate() method returns the Zod's safeParse result so use it to detect successful validation.

Full example

https://codesandbox.io/s/react-zorm-wizard-w7qrzk?file=/src/App.tsx:114-145

Also take a look at .merge() in Zod if need to validate the form in one go like on the wizard's last page, ssr etc.