How to properly handle errors in form?

[binajmen]

Hi,

I'd like to handle field errors when submitting a form using createServerAction$. I understand I can throw a ResponseError but I can't find in the doc how to use it.

The ultimate goal is to highlight the fields with errors and provide a useful description (validation done with zod). Coming from Remix, I'm looking for something similar to useActionData 🙈

In this example https://start.solidjs.com/core-concepts/actions#using-forms-to-submit-data, we throw a new Error("invalid username"). How can we industrialise this for a more complex form when using zod validation? Can I pass an object/json instead?

I was thinking about this for the meantime:

  const [{ result }, { Form }] = createServerAction$(
    async (formData: FormData) => {
      const parsing = z
        .object({
          email: z.string().email(),
          givenName: z.string(),
          familyName: z.string(),
          age: z.preprocess((v) => Number(v), z.number()),
          gender: z.enum(["male", "female", "other"]),
        })
        .safeParse(Object.fromEntries(formData.entries()));

      if (!parsing.success) {
        return { success: false, errors: parsing.error.flatten() };
      }

      await prisma.user.create({ data: parsing.data });
      return { success: true };
    }
  );

  const [, deleteUser] = createServerAction$(async (id: string) => {
    await prisma.user.delete({ where: { id } });
  });

  createEffect(() => console.log(result?.success));

But the createEffect only prints undefined. Pretty sure I'm doing something wrong.. 😅

Digging further, I feel I should do that:

    if (!parsing.success) {
      throw new FormError("Form error", {
        fieldErrors: parsing.error.formErrors.fieldErrors,
      });
    }

And do this:

        <Show when={add.error}>
          <p>There was an error</p>
        </Show>

What I'm struggling to find is how to retrieve the fieldErrors so I can provide fine-grained error explanation (field by field). Actually, it is available in add.error.fieldErrors but it is not typed. Is there a way to type it?

Going forward, I was wondering how I can simplify this:

      <Form>
        <h1>Add new user</h1>
        <input type="email" name="email" />
        {add.error?.fieldErrors["email"] &&
          add.error.fieldErrors["email"].join(", ")}

I ended up with this:

  const errors = () => add.error?.fieldErrors || {};

  return (
    <div>
      <Form>
        <h1>Add new user</h1>
        <input type="email" name="email" />
        {errors().email && errors().email.join(", ")}

Not quire sure why errors if not reactive without using signal. But it works ^^

In the end, I have this

  const [create, { Form }] = createServerAction$(async (formData: FormData) => {
    const parsing = z
      .object({
        email: z.string().email(),
        givenName: z.string(),
        familyName: z.string(),
        age: z.preprocess((v) => Number(v), z.number()),
        gender: z.enum(["male", "female", "other"]),
      })
      .safeParse(Object.fromEntries(formData.entries()));

    if (!parsing.success) {
      throw new FormError("", {
        fieldErrors: parsing.error.formErrors.fieldErrors,
        form: formData, // <--- fill in create.input
      });
    }

    try {
      await prisma.user.create({ data: parsing.data });
    } catch (error) {
      if (error instanceof Prisma.PrismaClientKnownRequestError) {
        if (error.code === "P2002") {
          throw new FormError("EMAIL_ALREADY_USED");
        }
      }
    }
  });

  return (
    <div>
      <Form>
        ...
        <Input
          type="text"
          name="givenName"
          label="Given name"
          value={(create.input?.get("givenName") as string) ?? ""}
        />

It is very boilerplate but digging a bit further, it seems you can provide back the formData in FormError so you can feed the value back in your form (useful when JS is off).

But either I'm doing something wrong, either this should be simplified in some ways because that's heavy 😓

I would really appreciate any feedback on how you do that.

[binajmen]

I'm still wondering if I'm doing things wrong 🙄