How to show server side validation errors - inline with react-hook-form ?!

[matthias]

Hi

Thanks for the great library.

Maybe this is helpful for somebody - or you want to add it to the documentation:
https://zsa.vercel.app/docs/forms#react-hook-form

This is how I show errors from the backend (actions) using react-hook-form

See the helper function: showInputParseError

First, it will validate the schema client side.
And if any additional checks fail in the action -> it will also display them per field.

Server side I even use the same updateZodSchema as client side. And extend / alter it where needed.

// imports ...

function SomeComponent() {
  const action = useServerAction(createChatbotAction);
  const form = useForm<UpdateSchema>({
    resolver: zodResolver(updateZodSchema),
    defaultValues: {
      name: ''
    },
  });
  
  async function onSubmit(values: ChatbotInsertData) {
    const [data, error] = await action.execute(values);

    if (showInputParseError(error, form) || error) {
      return;
    }

    // success
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        {action.isError && action.error.code === 'ERROR' && (
          <div
            className="text-red-700 mb-4"
            role="alert"
          >{action.error.message}</div>
        )}
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>name</FormLabel>
                <FormControl>
                  ...

function showInputParseError(error: any, form: any) {
  if (error && error.code === 'INPUT_PARSE_ERROR') {
    type ErrorKeys = Array<keyof typeof error.fieldErrors>;
    for (const fieldName of Object.keys(error.fieldErrors) as ErrorKeys) {
      form.setError(fieldName, {
        message: error.fieldErrors[fieldName]?.[0] || '',
      });
    }
    return true;
  }
  return false;
}