parseWithValibot

提供された valibot スキーマを使用してフォームデータを解析し、送信内容の概要を返すヘルパーです。

1const submission = parseWithValibot(payload, options);

#パラメータ

`payload`

フォームの送信方法に応じて、 FormData オブジェクトまたは URLSearchParams オブジェクトのいずれかになります。

`options.schema`

Valibot スキーマ、または Valibot スキーマを返す関数のいずれかです。

`options.info`

フォームデータの解析時に使用される Valibot の解析設定および言語の選択を指定します。

`options.disableAutoCoercion`

自動強制変換を無効にして、フォームデータの解析方法を自分で管理する場合は、true に設定します。

#例

1import { parseWithValibot } from '@conform-to/valibot';
2import { useForm } from '@conform-to/react';
3import { pipe, string, email, object } 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}

#ヒント

自動強制変換

デフォルトでは、parseWithValibot は空の値を削除し、スキーマをイントロスペクトしてフォームの値を正しい型に強制し、内部的に coerceFormValue ヘルパーを使用して追加の前処理ステップを挿入します。

この動作をカスタマイズする場合は、options.disableAutoCoercion を true に設定して自動強制変換を無効にし、自分で管理できます。

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  // 空の値を削除し、自分で数値を強制します
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}