Reuse a schema for immediate feedback
Client-side schema validation
Conform · Pipe
onValidate
onValidate is the useForm callback for custom form validation and revalidation. It receives a validation context and returns a validation result, commonly from a schema parser.
How it works
Set onValidate in useForm to provide custom validation whenever Conform needs to validate or revalidate the form. The callback receives the validation context, such as formData, and should return a validation result; it can use a schema parser or add custom errors.
Syntax
useForm({ onValidate(context) { return validationResult; } })Parameters
| Name | Type | Description |
|---|---|---|
context | ValidateContext | Validation context supplied by Conform, including formData and other form-state information. |
Returns
A validation result, such as the result returned by a schema parser; the callback may also return nothing when no validation result is produced.
Key points
- onValidate is the useForm callback responsible for running custom validation whenever Conform requests validation.
- The shouldValidate option determines whether validation starts on submit, when a field loses focus, or during input.
- If no validation trigger is configured, Conform begins validation on submission.
- When onSubmit is configured alongside onValidate, the submit callback is reached only after client validation succeeds.
Common mistakes
- When onSubmit is also configured, submission handling runs onValidate only after client-side validation succeeds.
Example: Validate with a schema
const [form, fields] = useForm({
onValidate({ formData }) {
return parseWithZod(formData, { schema });
},
});The handler parses the submitted form data with the chosen schema and returns Conform's validation result.
When to use it
Add validation logic not expressed by a schema
Custom form rules
Validate fields before submission
Blur or input validation
Defer checks that require server data
Server-backed validation
Interview questions
QWhat is onValidate used for?
onValidate is a useForm option containing the function Conform calls when the form should be validated or revalidated. The callback commonly receives formData and returns a parsed validation result.
Follow-up: How can schema validation be integrated? Pass formData to a schema helper such as parseWithZod and return its result from the callback.
QWhen does Conform call onValidate?
Set shouldValidate to onSubmit, onBlur, or onInput to control when initial field validation begins. The default is onSubmit.
Follow-up: How would you provide earlier feedback without validating on every keystroke? Start with onBlur, then configure shouldRevalidate separately for later events.
QHow is onValidate commonly combined with a schema?
A schema can be used inside onValidate to reuse the same validation logic on the client. The callback returns the schema parser's submission result for Conform to consume.
Follow-up: What is the trade-off of server-only validation? It keeps validation logic out of the client bundle, but network latency can affect feedback while typing.
Related
useFormshouldValidateshouldRevalidateonSubmitparseWithZodparseWithValibot