remix-hook-form

By default, remix-hook-form uses double stringification for complex values (arrays, objects, booleans, numbers) when sending data from client to server. This ensures that the server-side utilities can accurately parse the data back into its original types (e.g., a boolean true becomes the string '"true"' so it can be parsed back to true).

Customizing Serialization

1. Disable double stringification on the client: Set stringifyAllValues: false in the useRemixForm hook. This prevents strings from being double-wrapped.

2. Disable parsing on the server: If you prefer to handle type conversion manually (e.g., using Zod's coerce), set the third argument of getValidatedFormData to true (preserveStringified: true). This tells the utility to return the raw stringified values instead of attempting to parse them back to their original types.

// Client: Disable double stringification
const { handleSubmit, formState, register } = useRemixForm({
  mode: "onSubmit",
  resolver,
  stringifyAllValues: false,
});

// Server: Use raw stringified values (requires manual coercion in schema)
const { errors, data } = await getValidatedFormData<SchemaFormData>(
  request,
  resolver,
  true,
);

In version 7+, you can use unstable_extractFormDataMiddleware to make form data available in the context object of loaders and actions. This allows you to access validated or raw form data without manually calling getValidatedFormData from the request object.

1. Setup: Add the middleware to your unstable_middleware array in root.tsx.
2. Access: Use getFormData or getValidatedFormData from remix-hook-form/middleware, passing the context instead of the request.

// root.tsx
import { unstable_extractFormDataMiddleware } from "remix-hook-form/middleware";

export const unstable_middleware = [unstable_extractFormDataMiddleware()];

// loader or action
import { getFormData, getValidatedFormData } from "remix-hook-form/middleware";

export const action = async ({ context }: ActionFunctionArgs) => {
  const { data, errors, receivedValues } = await getValidatedFormData<FormData>(
    context,
    resolver,
  );
  // ...
};

Use useRemixForm on the client to manage form state and getValidatedFormData in the server-side action to validate incoming data. The getValidatedFormData utility automatically returns errors and receivedValues (default values), which useRemixForm picks up to populate the form state if validation fails.

import { useRemixForm, getValidatedFormData } from "remix-hook-form";
import { Form } from "react-router";
import { zodResolver } from "@hookform/resolvers/zod";
import * as zod from "zod";
import type { Route } from "./+types/home";

const schema = zod.object({
  name: zod.string().min(1),
  email: zod.string().email().min(1),
});

type FormData = zod.infer<typeof schema>;
const resolver = zodResolver(schema);

export const action = async ({ request }: Route.ActionArgs) => {
  const { errors, data, receivedValues: defaultValues } =
    await getValidatedFormData<FormData>(request, resolver);
  if (errors) {
    return { errors, defaultValues };
  }
  return data;
};

export default function MyForm() {
  const {
    handleSubmit,
    formState: { errors },
    register,
  } = useRemixForm<FormData>({
    mode: "onSubmit",
    resolver,
  });

  return (
    <Form onSubmit={handleSubmit} method="POST">
      <label>
        Name:
        <input type="text" {...register("name")} />
        {errors.name && <p>{errors.name.message}</p>}
      </label>
      <label>
        Email:
        <input type="email" {...register("email")} />
        {errors.email && <p>{errors.email.message}</p>}
      </label>
      <button type="submit">Submit</button>
    </Form>
  );
}

Use getValidatedFormData in your Remix/React Router action to parse and validate incoming request data. It is designed to handle both standard JS-enabled submissions and no-JS (progressive enhancement) scenarios.

Behavior:

• With JS: Automatically extracts data from the request object and validates it.
• No-JS (POST): Parses the formData object and converts it to the same shape as the data object returned by useRemixForm.
• No-JS (GET): If used in a loader with a GET request, it attempts to extract data from search parameters.

Return Value:

Returns an object containing:

• errors: An object matching the shape of useRemixForm errors (or undefined if valid).
• data: The validated data object (or undefined if invalid).
• receivedValues: The raw values received from the request. Returning this from your action allows useRemixForm to populate the form with these values (useful for persisting input on error when JS is disabled).

To persist values on error, return defaultValues from your action, which maps to receivedValues.

// Example: Returning errors and persisting values for no-js support
export const action = async ({ request }: Route.ActionArgs) => {
  const { errors, data, receivedValues: defaultValues } = 
    await getValidatedFormData<FormData>(request, resolver);

  if (errors) {
    // Returning defaultValues allows the form to repopulate in no-js mode
    return { errors, defaultValues };
  }

  // Process valid data...
  return { success: true };
};