Persistent Validation Errors After Failed Submission with react-hook-form, shadcn and Zod

[DeniCarvalho]

I'm facing an issue with react-hook-form, shadcn and Zod where validation errors persist even after a failed form submission. The problem occurs when I submit a form with incorrect data to the server (Action - Remix v2), and then on a subsequent submit attempt without changing any fields, the form still reports "Required" errors, even though the fields are still filled. You can watch it here.

It appears that the issue might be related to the loss of form values after a failed submission. Despite various attempts to clear errors or reset the form, the values are lost, causing persistent validation errors.
This issue can be frustrating for developers and could potentially lead to workarounds that involve storing copies of form values before submission, which feels redundant.

I would appreciate any guidance or insight on how to address this issue effectively, as it affects the user experience and development workflow. If there's a known solution or if this is indeed a bug, I'd like to better understand how to resolve it.

OBS: Interestingly, if I use {...form.register('email')} instead of {...field} it works, but I don't know if it's correct.

import type {
  MetaFunction,
  LoaderFunctionArgs,
  ActionFunctionArgs,
} from "@remix-run/node";
import { json } from "@remix-run/node";
import { useActionData, useNavigation, useSubmit } from "@remix-run/react";
import * as z from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";

export const loginSchema = z.object({
  email: z
    .string()
    .trim()
    .min(1, { message: JSON.stringify({ key: "error_required" }) })
    .email({ message: JSON.stringify({ key: "error_invalid_email" }) })
    .transform((value) => value.toLowerCase()),
  password: z
    .string()
    .trim()
    .min(1, { message: JSON.stringify({ key: "error_required" }) }),
});

export default function Index() {
  const actionData = useActionData<typeof action>();
  const submit = useSubmit();
  const transition = useNavigation();

  const form = useForm<z.infer<typeof loginSchema>>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  useEffect(() => {
    if (actionData?.error) {
      alert(actionData?.error?.message || "error");
    }
  }, [actionData]);

  const onSubmit = async (values: z.infer<typeof loginSchema>) => {
    const formData = new FormData();
    Object.entries(values).forEach(([key, value]: any) => {
      formData.append(key, value);
    });
    submit(formData, { method: "post", replace: true });
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="">
        <div className="flex flex-col justify-start items-start space-y-5 mb-7 w-full">
          <FormField
            control={form.control}
            name="email"
            disabled={transition.state === "submitting"}
            render={({ field }) => (
              <FormItem>
                <FormLabel>{$t({ key: "field_email" })}</FormLabel>
                <FormControl>
                  <Input
                    placeholder=""
                    autoComplete="email"
                    autoCorrect="off"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="password"
            disabled={transition.state === "submitting"}
            render={({ field }) => (
              <FormItem>
                <FormLabel>{$t({ key: "field_password" })}</FormLabel>
                <FormControl>
                  <Input
                    placeholder=""
                    type="password"
                    autoCapitalize="none"
                    autoComplete="off"
                    autoCorrect="off"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>
        <Button
          type="submit"
          variant={"brand"}
          className="w-full"
          disabled={transition.state === "submitting"}
        >
          {transition.state === "submitting" && (
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          )}
          {$t({ key: "sign_in" })}
        </Button>
      </form>
    </Form>
  );
}

export async function action({ request }: ActionFunctionArgs) {
  try {
    throw new Error("Invalid user");
  } catch (error: any) {
    return json({ error });
  }
}

[ProductOfAmerica]

Same here. My god this is annoying.

[Juli4nG]

Hello! I saw a tutorial from Jack Herrington talking about this issue a few weeks back:
https://youtu.be/VLk45JBe8L8?feature=shared&t=684

Basically if the submission fails you send back the fields from the server and set them as defaultValues.

I'm using Next.js with server actions, but it may be of some guidance. :)

Client side

const [state, formAction] = useFormState(FormAction, {
    message: "",
  });

  const form = useForm<z.output<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
     // Put your normal default values here
      ...(state?.fields ?? {}),
    },
  });

return (
<Form {...form}>
      <form
        ref={formRef}
        action={formAction}
        onSubmit={(evt) => {
          evt.preventDefault();
          form.handleSubmit(() => {
            formAction(new FormData(formRef.current!));
          })(evt);
        }}
      >
      // Form fields go here....
      {state?.message !== "" && !state.issues && (
          <div className="text-red-500">{state.message}</div>
        )}
        {state?.issues && (
          <div className="text-red-500">
            <ul>
              {state.issues.map((issue: string) => (
                <li key={issue} className="flex gap-1">
                  {issue}
                </li>
              ))}
            </ul>
          </div>
        )}
   </form>
</Form>

On the server

export type FormState = {
  message?: string;
  fields?: Record<string, string>;
  issues?: string[];
};

export async function FormAction(
  prevState: FormState,
  data: FormData
): Promise<FormState> {
  const formData = Object.fromEntries(data);
  const parsed = FormSchema.safeParse(formData);

  if (!parsed.success) {
    const fields: Record<string, string> = {};
    for (const key of Object.keys(formData)) {
      fields[key] = formData[key].toString();
    }
    return {
      message: "Invalid form data",
      fields,
      issues: parsed.error.issues.map((issue) => issue.message),
    };

   // Save to database or do whatever below
  }