Connect a Valibot schema to useForm's onValidate callback.
Client-side form validation
Conform · Function
parseWithValibot
parseWithValibot validates FormData or URLSearchParams with a Valibot schema and returns Conform's submission overview. It supports schema factories, parse options, and configurable automatic coercion.
How it works
parseWithValibot reads FormData or URLSearchParams and validates it against a Valibot schema, returning Conform's submission overview. It can also receive a schema-producing function and optional parse configuration; automatic empty-value stripping and type coercion are enabled unless explicitly disabled.
Syntax
parseWithValibot(payload, options)Parameters
| Name | Type | Description |
|---|---|---|
payload | FormData | URLSearchParams | FormData or URLSearchParams submitted by the form. |
options | object | Options containing the Valibot schema or schema factory, optional parse information, and optional coercion control. |
options.schema | BaseSchema | (intent) => BaseSchema | Valibot schema or function returning a schema. |
options.info | ParseInfo | Valibot parse configuration and language selection. |
options.disableAutoCoercion | boolean | Disables automatic type coercion when true. |
Returns
A Conform submission overview containing the parsed validation result.
Key points
- The helper parses submitted form data and produces a Conform submission overview.
- The payload supports both standard browser FormData and URLSearchParams submissions.
- The schema option accepts a schema directly or a function that creates one.
- The info option supplies Valibot parse settings and the parsing language.
- Set disableAutoCoercion to true when preprocessing and type conversion should be managed by application code.
- Default coercion is implemented by adding preprocessing based on the inspected schema.
Common mistakes
- Empty values are stripped and form values are coerced automatically by default, so disable this behavior when you need to control parsing yourself.
Example: Validate form data with Valibot
import { parseWithValibot } from '@conform-to/valibot';
import { useForm } from '@conform-to/react';
import { email, object, pipe, string } from 'valibot';
const schema = object({
email: pipe(string(), email()),
});
function ExampleForm() {
const [form] = useForm({
onValidate({ formData }) {
return parseWithValibot(formData, { schema });
},
});
return <form id={form.id} method="post" />;
}Pass the submitted form data and Valibot schema to obtain Conform's validation submission.
When to use it
Parse request form data before processing a submission.
Server-side action validation
Return different schemas from the schema option according to the submission intent.
Intent-specific validation
Interview questions
QWhat does parseWithValibot do?
It accepts submitted FormData or URLSearchParams plus options containing a Valibot schema. The result is a Conform submission overview containing the parsed validation outcome.
Follow-up: How can schema selection depend on the submission intent? Pass a function as options.schema; it receives the intent and returns the appropriate Valibot schema.
QWhat are the main inputs?
The payload is the submitted FormData or URLSearchParams object. The options object supplies either a Valibot schema or a function that returns one, and may also include Valibot parse configuration.
Follow-up: What can options.info control? It provides Valibot parse configuration and selects the language used while parsing form data.
QHow do you customize coercion?
Automatic coercion can be disabled with options.disableAutoCoercion set to true. When disabled, the caller is responsible for preprocessing and parsing form values.
Follow-up: What happens when the option is omitted? Conform introspects the schema and internally adds preprocessing through its coercion helper.
Related
coerceFormValueuseFormValibot schemaconformValibotMessage