Blur validation
Validate a specific input when it loses focus.
Conform · Pipe
form.validate
form.validate triggers Conform validation for a form field or the whole form. It can be called directly, including from a blur handler, or used to configure a validation button.
How it works
form.validate is the validation intent exposed by useForm. Call it with a field name to mark that field for validation, or use its button helper to create a control that triggers validation without submitting the form.
Syntax
form.validate({ name?: string })Parameters
| Name | Type | Description |
|---|---|---|
options | object | An optional object containing name, the field name to validate. |
Returns
A validation intent function on the form object; its button helper returns props for a validation control.
Key points
- A button can be configured to initiate validation.
getButtonPropscan create the button properties for validating a named field.- Calling
form.validatewith a name targets the corresponding field.
Common mistakes
- Validation can be triggered outside normal form submission, including during typing or when a field loses focus.
- For blur validation, invoke the intent directly from the input's blur handler.
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>
);
}Validates the email field when the input loses focus.
When to use it
Validation button
Let a user explicitly check one field with a control.
Whole-form validation
Validate the complete form through the validation intent.
Interview questions
QWhat does form.validate do?
form.validate is the validation intent returned by useForm. Calling it with a field name validates that field; calling it without a name validates the whole form.
Follow-up: How can validation be triggered without JavaScript? Use the serialized intent as the value of a native submit button, so the form can dispatch the same intent.
QHow do you validate a field on blur?
Pass an object containing the field name, such as form.validate({ name: event.target.name }), from an input's blur handler. This triggers validation when the user leaves the field rather than waiting for submission.
Follow-up: How would you validate a nested fieldset? Supply its nested name; the intent validates all fields within that fieldset.
QHow can a button trigger validation?
Use form.validate.getButtonProps({ name: fields.email.name }) on a button. The button serializes the validation intent, and Conform marks the selected field as validated when it is clicked.
Follow-up: What alternative supports no-JavaScript operation? Put the serialized intent on a native submit button using the form's reserved intent name.
Related
useFormform.resetform.insertvalidate intentshouldValidateshouldRevalidate