Comment valider un formulaire côté serveur

1
import { z } from "zod"
2

3
export const UserCreateSchema = z.object({
4
  action: z.literal("create-user"),
5
  firstName: z.string().min(2, "2 caractères minimum"),
6
  lastName:  z.string().min(2, "2 caractères minimum"),
7
})
8

9
export const UserUpdateSchema = z.object({
10
  action: z.literal("update-user"),
11
  firstName: z.string().min(2),
12
  lastName:  z.string().min(2),
13
})
14

15
export const UserActionsSchema = z.discriminatedUnion(
16
  "action",
17
  [UserCreateSchema, UserUpdateSchema],
18
)

1
import { parseWithZod } from "@conform-to/zod";
2
import { data } from "react-router";
3

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

7
  const submission = await parseWithZod(formData, {
8
    async: true,               // autorise le code asynchrone
9
    schema: UserActionsSchema.superRefine(async (values, ctx) => {
10
      if (values.action === "create-user") {
11
        const slug = createSlug({ firstName: values.firstName })
12
        const exists = await getUserBySlug({ slug })
13
        if (exists) {
14
          ctx.addIssue({
15
            path: ["firstName"],
16
            code: "custom",
17
            message: "Cet utilisateur existe déjà.",
18
          })
19
        }
20
      }
21
    }),
22
  })
23

24
  if (submission.status !== "success") {
25
    // ^ renvoie un format compris par Conform
26
    return data({ result: submission.reply() }, { status: 400 })
27
  }
28

29
  /* …traitement en BDD, puis redirect … */
30
}

1
import { useActionData, useLoaderData } from "react-router"
2
import { useForm, getFormProps, getInputProps } from "@conform-to/react"
3

4
export default function UserForm() {
5
  const { isNew, user } = useLoaderData<typeof loader>()
6
  const actionData      = useActionData<typeof action>()
7

8
  const [form, fields] = useForm({
9
    id: "user-form",
10
    lastResult: actionData?.result,          // 🔗 lien serveur → client
11
    defaultValue: {
12
      firstName: user?.firstName,
13
      lastName:  user?.lastName,
14
      action:    isNew ? "create-user" : "update-user",
15
    },
16
  })
17

18
  return (
19
    <Form method="POST" {...getFormProps(form)} className="space-y-4">
20
      <input { ...getInputProps(fields.action, { type: "hidden" }) } />
21
      {/* firstname */}
22
      <Field
23
        labelProps={{ children: "Prénom" }}
24
        inputProps={ getInputProps(fields.firstName, { type: "text" }) }
25
        errors={fields.firstName.errors}
26
      />
27
      {/* lastname */}
28
      <Field
29
        labelProps={{ children: "Nom" }}
30
        inputProps={ getInputProps(fields.lastName, { type: "text" }) }
31
        errors={fields.lastName.errors}
32
      />
33
      <button className="btn-primary">
34
        {isNew ? "Ajouter" : "Modifier"}
35
      </button>
36
    </Form>
37
  )
38
}

1
switch (submission.value.action) {
2
  case "create-user": {
3
    const { slug } = await addUser(submission.value)
4
    return redirect(href("/users/:userSlug", { userSlug: slug }))
5
  }
6
  case "update-user": {
7
    const { slug } = await updateUser({
8
      slug: params.userSlug,
9
      userData: submission.value,
10
    })
11
    return redirect(href("/users/:userSlug", { userSlug: slug }))
12
  }
13
}

1
export default function User() {
2
  const { userSlug } = useParams()
3
  return <UserForm key={userSlug} />   // force un remount
4
}