React-hook-form + zod + translations

[asafs94]

Hi there,
I'm trying to create a form handling layer in our app and have come across an issue which I could not find the solution for:
I want to be able to display translated error messages. All the examples that I saw up until now suggest that the formatted message for the end user, should come from the schema itself.

The common example that I have come across is something like the following:

const myFormSchema = z.object({
  name: z.string().min(3, "Name must be at least 3 characters long")
})

export type MyFormSchema = z.infer<typeof myFormSchema>

function MyFormComponent(){
  const formMethods = useForm({ resolver: zodResolver(myFormSchema) })
  return <>MY JSX HERE</>
}

In my case, I have to do something like this:

function MyFormComponent(){
  const t = useTranlsation()
  const myFormSchema = useMemo(()=>
    z.object({
      name: z.string().min(3, t("form_errors.too_short", { label: t("label.name"), min: 3 }))
    })
  ,[t])
  const formMethods = useForm({ resolver: zodResolver(myFormSchema) })
  return <>MY JSX HERE</>
}

This has 2 big disadvantages: The schema cannot be reused outside of react, and the type cannot be auto-inferred and used in another module.

The ideal solution would be to get more information from FieldError in react-hook-form,
Right now, for this error I would get something like the following:

{
  message: "Name must be at least 3 characters long",
  ref: input#inp-4897.800000071526.Input__StyledInput-sc-x1uzv0-1.jycajB.input__field,
  type: "too_small"
}

This is the data that zod provides:

  {
    "code": "too_small",
    "minimum": 3,
    "type": "string",
    "message": "Name must be at least 3 characters long",
    "path": [
      "name"
    ],
    "inclusive": false
  },

Had I received the complete information from zod, I could've translated the message properly. Which is impossible with the information from FieldError.
Any recommendations? Am I doing something wrong?

[leapful]

@asafs94

Instead of using plain message error on zod validation rule, you can use a translation key then just create an Error component that get the key and put it into translate function.

For example:

const schema = zod.object({
  name: zod.string().min(3, 'errors.min_name')
})

const Error = ({ error }) => {
    const { t } = useTranslate();

   if (!error) {
      return null;
   }

   return <>{t(error)}</>
}

const App = () => {
    const { formState: { errors } } = useForm({
      resolver: zodResolver(schema)
    })

    ...

   return <>
             <Error error={errors?.name?.message} />
         </>
}

[JuMastro]

@leapful

Ok but how do u get the limit value, 3 in this case?

[matewka]

I'd discourage this if you're using tools that parse source code for finding untranslated messages, e.g. i18next-parser. Such tools are usually unable to detect translation function invocations which are not literal strings.

[pehagg]

@matewka , this approach is problematic from the separation of concerns point of view. Validation shouldn't be concerned about translation or presentation. Translating the error messages in the schema leads to a bunch of issues. In my particular case in a requirement cycle that prevents the app from launching. The solution presented here is the only sane solution I've seen so far.

[Mrhoho]

Any progress?

[sahandsn]

need translated error messages for zod

[pav-stastny]

If anyone stumbled upon this thread, this may be useful to you:

https://github.com/orgs/react-hook-form/discussions/9452

(looks like possible solution is to pass t function to resolver function)

ie: resolver: zodResolver(validationFunction(t))