Validation avec Zod et Conform

1
import { z } from "zod";
2

3
export const userCreateSchema = z.object({
4
  action: z.literal("create-user"),
5
  firstName: z
6
    .string({ required_error: "Le prénom est requis" })
7
    .min(2, "Longueur minimum : 2 caractères"),
8
  lastName: z
9
    .string({ required_error: "Le nom est requis" })
10
    .min(2, "Longueur minimum : 2 caractères"),
11
});
12

13
export const userUpdateSchema = z.object({
14
  action: z.literal("update-user"),
15
  firstName: z.string().min(2),
16
  lastName: z.string().min(2),
17
});
18

19
/** Schéma discriminé – create OU update  */
20
export const userActionSchema = z.discriminatedUnion("action", [
21
  userCreateSchema,
22
  userUpdateSchema,
23
]);

1
import { parseWithZod } from "@conform-to/zod";
2
import { userActionSchema } from "~/schemas/user";
3

4
export async function action({ request, params }) {
5
  const formData = await request.formData();
6

7
  // 1. On parse de manière « safe » (pas d’exception JS)
8
  const submission = await parseWithZod(formData, {
9
    schema: userActionSchema.superRefine(async (data, ctx) => {
10
      if (data.action === "create-user") {
11
        // règle business : « slug » unique
12
        const slug = createSlug({ firstName: data.firstName });
13
        if (await getUserBySlug({ slug })) {
14
          ctx.addIssue({
15
            path: ["firstName"],
16
            code: "custom",
17
            message: "Un utilisateur porte déjà ce prénom",
18
          });
19
        }
20
      }
21
    }),
22
  });
23

24
  // 2. Si erreur → on renvoie un JSON structuré pour Conform
25
  if (submission.status !== "success") {
26
    return data({ result: submission.reply() }, { status: 400 });
27
  }
28

29
  // 3. Sinon on exécute la mutation
30
  /* … addUser / updateUser … */
31
}

1
import { getFormProps, getInputProps, useForm } from "@conform-to/react";
2
import { getZodConstraint } from "@conform-to/zod";
3
import { useActionData, useLoaderData, Form } from "react-router";
4
import { userActionSchema } from "~/schemas/user";
5

6
function UserForm() {
7
  const { user, isNew } = useLoaderData<typeof loader>();
8
  const actionData = useActionData<typeof action>();
9

10
  const [form, fields] = useForm({
11
    id: "user-form",
12
    lastResult: actionData?.result,          // 🡄 erreurs serveur
13
    constraint: getZodConstraint(userActionSchema), // 🡄 attrs HTML
14
    onValidate({ formData }) {
15
      /* Validation instantanée côté client */
16
      return parseWithZod(formData, { schema: userActionSchema });
17
    },
18
    defaultValue: {
19
      firstName: user?.firstName,
20
      lastName:  user?.lastName,
21
      action:    isNew ? "create-user" : "update-user",
22
    },
23
  });

1
  return (
2
    <Form method="POST" {...getFormProps(form)}
3
          className="space-y-4 bg-white p-4 rounded shadow">
4
      {/* champ action caché */}
5
      <input {...getInputProps(fields.action, { type: "hidden" })} />
6

7
      <Field                   /* composant réutilisable */
8
        labelProps={{ children: "Prénom" }}
9
        inputProps={getInputProps(fields.firstName, { type: "text" })}
10
        errors={fields.firstName.errors}
11
      />
12

13
      <Field
14
        labelProps={{ children: "Nom" }}
15
        inputProps={getInputProps(fields.lastName, { type: "text" })}
16
        errors={fields.lastName.errors}
17
      />
18

19
      <button
20
        type="submit"
21
        disabled={form.submission?.pending}
22
        className={`btn ${isNew ? "bg-emerald-600" : "bg-blue-600"}`}
23
      >
24
        {form.submission?.pending
25
          ? "En cours…"
26
          : isNew
27
          ? "Ajouter"
28
          : "Modifier"}
29
      </button>
30
    </Form>
31
  );
32
}