Blitz provides some handy utility functions
validateZodSchemaThis utility function will validate input using a
zod schema, and format any errors
to be usable with your form library.
This is currently compatible with both React Final Form and Formik and any others with the same API.
import {validateZodSchema} from 'blitz'
<FinalForm
initialValues={initialValues}
validate={validateZodSchema(schema)}
...const validationFunction = validateZodSchema(MyZodSchema)ZodSchema: a zod schemaA validation function to pass to a Form component's validate prop. It
accepts some values and returns an object containing any errors.
(values: any) => ObjectformatZodErrorThis utility function will take a ZodError and format it nicely to be usable with your form library.
This is currently compatible with both React Final Form and Formik and any others with the same API.
import {formatZodError} from 'blitz'
<FinalForm
initialValues={initialValues}
validate={values => {
try {
schema.parse(values)
} catch (error) {
return formatZodError(error)
}
}}
...const formattedErrorsObject = formatZodError(myZodError)ZodError: a zod errorAn object with errors that makes the same shape as the original schema