Multi step forms with ZOD

[janrembold]

Hi all,
I just followed the multi step recipe (https://mantine.dev/form/recipes/#form-with-multiple-steps) and wanted to enhance it with the zodResolver for validation. As ZOD works perfectly fine with simple forms it doesn't work with multiple steps as the zodResolver always checks all fields and the hidden/next inputs always throw errors.

I can only think about creating multiple schemas one for any step in the form and then to manually validate them by the current active step or to manually check if only a subset of elements don't throw an error. Even though it works this way, it's a bit tedious and makes the code bloated. Is there a more elegant solution for this scenario, or am I missing something?

Thanks for any help or advice!
Best, Jan

[rtivital]

No, there is not any solution besides those that you've mentioned

[yverby]

There is another idea to try to validate the fields of a specific step using form.validateField

const hasErrors = ['first', 'second'].some((field) => form.validateField(field).hasError);

if (!hasErrors) {
  // change the current step
}

In this case, you will have one scheme for validation, but during validation, only certain fields will be checked at each step

[janrembold]

Thanks for the quick responses! I think I will choose the option with a single schema so I can at least end up with a single fully validated payload at the end. Maybe with a little generic helper function this isn't too bad!

[JohayerChowdury]

Sorry, where is validateField coming from exactly? and hasError?

[yverby]

Sorry, where is validateField coming from exactly? and hasError?

const form = useForm();

const result = form.validateField('fieldName');

result.hasError;

[anthonyalayo]

@janrembold which solution did you end with?