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))

[BartSiedlecki]

Hello.
Not perfect but simple and working solution:
For different validation setup should use different conditions inside useEffect.

export const DemoForm = () => {
	const initValues: LoginCommand = {
		login: '',
		password: '',
	};

	const demoFormValidationSchema = z.object({
		login: z.string().min(
			fieldLengths.LoginMin,
			i18n.t('Validation.Login.MinimumLengthViolation', {
				value: fieldLengths.LoginMin,
			})
		),
		password: z.string().min(
			fieldLengths.PasswordMin,
			i18n.t('Validation.Password.MinimumLengthViolation', {
				value: fieldLengths.PasswordMin,
			})
		),
	});

	const formMethods = useForm<LoginCommand>({
		mode: 'onChange',
		reValidateMode: 'onChange',
		resolver: zodResolver(demoFormValidationSchema),
		defaultValues: initValues,
	});

	const {
		formState: { errors },
		trigger,
	} = formMethods;

	useEffect(() => {
		const errorFields = Object.keys(errors);

		if (errorFields.length > 0) {
			trigger(errorFields as (keyof LoginCommand)[]);
		}

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [i18n.language, errors, trigger]);

	const onSubmit = (data: LoginCommand) => {
		console.log(data);
	};

	return (
		<FormProvider {...formMethods}>
			<form onSubmit={formMethods.handleSubmit(onSubmit)}>
				<TextField label='Login label' name='login' />
				<TextField label='Password label' type='password' name='password' />
				<button type='submit'>Submit</button>
			</form>
		</FormProvider>
	);
};

[vinodsantharam]

I have made a hook based on your snippet.

import { useLocale } from 'next-intl';
import { useEffect, useMemo, useRef } from 'react';
import { FieldValues, Path, UseFormReturn } from 'react-hook-form';

/**
 * Trigger validation when language changes to force render translated error message.
 * This solution is a workaround inspired by https://github.com/orgs/react-hook-form/discussions/10010#discussioncomment-12394803
 * @param form useFormReturn<T> form instance
 */
export const useTranslatedFormError = <T extends FieldValues>(
  form: UseFormReturn<T>,
) => {
  const locale = useLocale();
  const lastLanguage = useRef(locale);
  const errors = useMemo(() => form.formState.errors, [form.formState.errors]);
  const { trigger } = form;

  useEffect(() => {
    const errorFields = Object.keys(errors);

    if (errorFields.length > 0 && lastLanguage.current !== locale) {
      trigger(errorFields as Path<T>[]);
    }

    lastLanguage.current = locale;
  }, [locale, errors, trigger]);
};

Finally we decided to refactor our app and follow @leapful approach. Separation of concerns 🥇