Form Error Message Localization

[chuwong35122]

Hi. I'm using next-intl as my localization library of choice and is currently working on form. How should I approach form error mesage localization that fits shadcn-ui's form taxonomy?

Like how should I render the localized to the selected locale

const t = useTranslation("Login")

...
 <FormField
      control={control}
      name="password"
      render={({ field }) => (
        <FormItem>
          <FormLabel>{t("password")}</FormLabel>
          <FormControl>
            <Input {...field} type="password" />
          </FormControl>
          <FormDescription>{t("password_helper")}</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />

[nillpoe]

I think

const FormMessage = React.forwardRef<
    HTMLParagraphElement,
    React.HTMLAttributes<HTMLParagraphElement>
>(({className, children, ...props}, ref) => {
    const {error, formMessageId} = useFormField()
    const t = useTranslations()
    const body = error ? String(t(error?.message as any)) : children

    if (!body) {
        return null
    }

    return (
        <p
            ref={ref}
            id={formMessageId}
            className={cn("text-[0.8rem] font-medium text-destructive", className)}
            {...props}
        >
            {body}
        </p>
    )
});
FormMessage.displayName = "FormMessage";

[chuwong35122]

That's what I think also, but using this method means I have to use the same useTranslation key for every form right? I wonder if there's a way with better ergonomic for various usage of useTranslation keys.

[shizlbizl]

My solution is to change the FormMessage component (afetr all that's the beauty of shadcn that the code is ours):

type FormMessageProps = Omit<React.HTMLAttributes<HTMLParagraphElement>, "children"> & {
  children?: (error?: FieldError) => React.ReactNode;
};
const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
  ({ className, children, ...props }, ref) => {
    const { error, formMessageId } = useFormField();
    const body = children?.(error) ?? (error && String(error?.message));

    if (!body) {
      return null;
    }

    return (
      <p
        ref={ref}
        id={formMessageId}
        className={cn("text-[0.8rem] font-medium text-destructive", className)}
        {...props}
      >
        {body}
      </p>
    );
  },
);

and later use it like
.... <FormMessage>{(error) => getErrorMessage(field.name, error)}</FormMessage>

The only problem I face is that I don't see how to access the arguments like min/max if using zod for validation and for instance having something like z.string().min(2).max(50) - these min 2 and max 50 don't know how to access them.

For that reason I think this localizartion must be configured somehow in the resolver like @hookform/resolvers/zod

[Vitaurus]

You can use a schema for validation. And apply translations directly to it.

type ValidationSchema = z.infer<ReturnType<typeof useValidation>>;

 const useValidation = () => {
  const t = useTranslations();
  return z.object({
    username: z
      .string()
      .max(50, t('forms.max', { value: 50 }))
      .nonempty(t('forms.required')),
  });
};

 const Form = () => {
  const schema = useValidation()
  const form = useForm< ValidationSchema>({
    resolver: zodResolver(schema),
    defaultValues: {
      username: "",
    },
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(()=>{})} className='space-y-8'>
        <FormField
          control={form.control}
          name='username'
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder='shadcn' {...field} />
              </FormControl>
              <FormDescription>
                This is your public display name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type='submit'>Submit</Button>
      </form>
    </Form>
  );
};