Validate on blur
A user leaves an input and the application should validate that field immediately.
Conform · Module
intent.validate
The validate intent runs Conform validation for a specific field or the entire form. It can be used through a validation button or dispatched directly, such as from a blur handler.
How it works
The validate intent can be dispatched directly through the form object, optionally with a field name. Conform then marks the selected field as validated and exposes any resulting validation error; omitting the name validates the whole form.
Syntax
form.validate({ name?: string })Parameters
| Name | Type | Description |
|---|---|---|
name | string | undefined | Optional field name; omit it to validate the whole form. |
Returns
Triggers validation for the selected field or the whole form; validation errors are then available through the form state.
Key points
- A button can be configured to invoke validation through the validate intent.
- Conform serializes the intent in a reserved control value and interprets it when the control is activated.
- Targeted validation updates the field's validated state and makes its error available.
- The intent can be dispatched programmatically instead of through a button.
Example: Validate a field on blur
import { useForm } from '@conform-to/react';
export function EmailForm() {
const [form, fields] = useForm();
return (
<form id={form.id}>
<input
name={fields.email.name}
onBlur={(event) => form.validate({ name: event.target.name })}
/>
</form>
);
}Calls validation when the email field loses focus.
When to use it
Field validation button
A form provides a control for checking one field before submission.
Limit expensive validation
A schema contains costly or asynchronous checks that should run only for the field being validated.
Interview questions
QWhat does the validate intent do?
The validate intent is a form action that runs validation without requiring a normal form submission. It can target one field by passing its name, or the entire form when no name is supplied.
Follow-up: How can validation be triggered on blur? Call the form's validate method from the field's blur handler and pass the field name.
QHow can a button validate one field?
A validation control can use the helper returned by form.validate.getButtonProps with the target field name. When activated, Conform recognizes the serialized intent and validates that field.
Follow-up: How can the same behavior work without a button? Dispatch form.validate directly from an event such as onBlur.
QHow can validation work be minimized?
The intent is available to the schema parsing flow, so validation can be narrowed by checking whether the intent is null or represents validation for the relevant field. This helps avoid costly checks, including asynchronous ones, for unrelated fields.
Follow-up: Why is intent-aware schema selection useful? It lets the server perform only the validation needed for the current interaction while retaining full validation for ordinary submissions.
Related
useFormform.validate.getButtonPropsparseWithZodintent