Unable to display Zod error for checkbox

[zaru]

I've made a checkbox field that allows multiple selections. I defined an array schema using Zod. While it correctly triggers validation errors as expected, the error message does not display.

Is there a good way to fix this?

Here's the relevant code:

const favoriteFruits = ["apple", "orange", "banana"] as const;

const schema = z.object({
  // Intentionally leaving out 'orange' to trigger a validation error
  favoriteFruit: z.enum(["apple", "banana"]).array(), 
});

export function Form() {
  const [lastResult, action] = useFormState(submitAction, undefined);
  const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      console.log(parseWithZod(formData, { schema: schema }));
      return parseWithZod(formData, { schema: schema });
    },
    shouldValidate: "onInput",
  });
  return (
    <form action={action} {...getFormProps(form)}>
      {favoriteFruits.map((fruit) => (
        <div key={fruit}>
          <input
            id={fruit}
            type="checkbox"
            name={fields.favoriteFruit.name}
            value={fruit}
          />
          <label htmlFor={fruit}>{fruit}</label>
        </div>
      ))}
      <div>{fields.favoriteFruit.errors}</div>
    </form>
  );
}

Also, could the issue be that the return from parseWithZod is favoriteFruit[0] instead of favoriteFruit ?

[edmundhung]

Conform map each field errors simply by the name. In your case, the name of the favoriteFruits field is favoriteFruit instead of favoriteFruit[0] which result in fields.favoriteFruit.errors being undefined. Similarily, this is why it works properly if you are building a list of fields in which the field names will be favoriteFruit[0], favoriteFruit[1] and so on.

To fix it, please use fields.favoriteFruit.allErrors instead. This gives you an object that includes all errors under favoriteFruit with key being the name of the corresponding errors. If you don't care about the name, you can make it an array like this:

Object.entries(fields.favoriteFruit.allErrors).flatMap(([, messages]) => messages)

[zaru]

@edmundhung Thank you for your advice.
The error message was displayed by referencing allErrors.

However, enum error messages are only displayed once you submit. Is this the specification?

step

1. Check [orange]
2. "Invalid enum value." error is not displayed in onInput event
3. Submit
4. "Invalid enum value." error appears
5. From then on, an error is displayed in the onInput event

2024-04-25.8.44.39.mov

[edmundhung]

It should be fixed with #607.

[edmundhung]

Thanks for reporting the issue! This is fixed in v1.1.3.

[zaru]

Thank you for your response!

[vKongv]

Hey @edmundhung , I am using 1.1.3 but .errors still doesn't return the errors. Is it only workable with .allErrors like the answer you provided? Just wondering what does the fix mean.

[vKongv]

Also should this be in the doc? I was referring to https://conform.guide/checkbox-and-radio-group and it's not accurate because it's using .errors to display errors in checkboxes and radio group. The example is also not clear without schema defined.