parseWithValibot

A helper that returns an overview of the submission by parsing the form data with the provided valibot schema.

1const submission = parseWithValibot(payload, options);

#Parameters

`payload`

It could be either the FormData or URLSearchParams object depending on how the form is submitted.

`options.schema`

Either a valibot schema or a function that returns a valibot schema.

`options.info`

A valibot parse configuration and select language to be used when parsing the form data.

`options.disableAutoCoercion`

Set it to true if you want to disable automatic type coercion and manage how the form data is parsed yourself.

#Example

1import { parseWithValibot } from '@conform-to/valibot';
2import { useForm } from '@conform-to/react';
3import { pipe, string, email } from 'valibot';
4
5const schema = object({
6  email: pipe(string(), email()),
7  password: string(),
8});
9
10function Example() {
11  const [form, fields] = useForm({
12    onValidate({ formData }) {
13      return parseWithValibot(formData, { schema });
14    },
15  });
16
17  // ...
18}

#Tips

Automatic type coercion

By default, parseWithValibot will strip empty value and coerce form value to the correct type by introspecting the schema and inject extra preprocessing steps using the coerceFormValue helper internally.

If you want to customize this behavior, you can disable automatic type coercion by setting options.disableAutoCoercion to true and manage it yourself.

1import { parseWithValibot } from '@conform-to/valibot';
2import { useForm } from '@conform-to/react';
3import { pipe, object, transform, unknown, number } from 'valibot';
4
5const schema = object({
6  // Strip empty value and coerce the number yourself
7  amount: pipe(
8    unknown(),
9    transform((value) => {
10      if (typeof value !== 'string') {
11        return value;
12      }
13
14      if (value === '') {
15        return undefined;
16      }
17
18      return Number(value.trim().replace(/,/g, ''));
19    }),
20    number(),
21  ),
22});
23
24function Example() {
25  const [form, fields] = useForm({
26    onValidate({ formData }) {
27      return parseWithValibot(formData, {
28        schema,
29        disableAutoCoercion: true,
30      });
31    },
32  });
33
34  // ...
35}