How to handle checkbox?

[jdgamble555]

I have a checkbox completed that is passed to the server. The value seems to be: 'on' | null;

How can I handle this with valibot?

I need to validate a boolean value.

const TaskSchema = object({
    name: string(),
    completed: boolean()
});

const result = safeParse(TaskSchema, Object.fromEntries(formData));
  
...

J

[fabian-hiller]

I recommend to use decode-formdata for that: https://github.com/fabian-hiller/decode-formdata

[jdgamble555]

Thanks, but I'm not understanding this implementation?

[fabian-hiller]

In your case I recommend to use coerce. Please give me more details so that I can answer you more appropriately.

[jdgamble555]

What more details do you need? It is just a checkbox passed to the server (from above) with the code:

const result = safeParse(TaskSchema, Object.fromEntries(formData));

I'm not understanding the usage of either (the docs don't help much there).

J

[fabian-hiller]

Please ask specific questions if this information is not sufficient for you.

• https://valibot.dev/guides/methods/#coerce
• https://valibot.dev/guides/methods/#transform

[jdgamble555]

Hi Fabian,

I apologize, but I thought I did. I gave you my entire code. It turns out, I just needed to post the coerce instead of the transform like you put:

const TodoSchema = object({
    name: string([minLength(1, 'Name is required')]),
    completed: coerce(boolean(), Boolean)
});

This worked.

Thanks,

J

[CanRau]

another option is rewriting zfd's checkbox

type CheckboxOpts = {
  trueValue?: string;
};

export const checkbox = ({ trueValue = "on" }: CheckboxOpts = {}) =>
  v.union([
    v.pipe(v.literal(trueValue), v.transform(() => true)),
    v.pipe(v.undefined(), v.transform(() => false))
  ]);

or you could allow booleans as well

export const checkbox = ({ trueValue = "on" }: CheckboxOpts = {}) =>
  v.union([
    v.boolean(),
    v.pipe(v.literal(trueValue), v.transform(() => true)),
    v.pipe(v.undefined(), v.transform(() => false))
  ]);

here's a playground

or even more general boolish ^^