useFormValidation
Validates only the fields in the current step — not the entire form. This is what prevents users from advancing to the next step when the current step has errors.
You probably don’t need this directly.
useFormStatecalls it internally. Use it when building custom step validation logic.
Signature
import { useFormValidation } from '@saastro/forms';
const { validateStep } = useFormValidation({ methods, steps, currentStepId });
Parameters
| Parameter | Type | Description |
|---|---|---|
methods | UseFormReturn | React Hook Form instance |
steps | Steps | Steps configuration map |
currentStepId | string | The step to validate |
Return Value
| Property | Type | Description |
|---|---|---|
validateStep | () => Promise<boolean> | Validates current step fields. Returns true if valid |
How It Works
- Looks up the current step’s field list from
steps[currentStepId] - Calls
methods.trigger(fields, { shouldFocus: true })— React Hook Form validates only those specific fields - If invalid, shows a toast notification and auto-focuses the first errored field
- Returns
trueif all fields pass,falseotherwise
Edge cases:
- Returns
falseif the step ID doesn’t exist insteps - Returns
trueif the step has no fields (empty steps always pass) - Catches unexpected exceptions and returns
falsewith a toast
Example
import { useFormValidation } from '@saastro/forms';
function StepForm({ methods, steps, currentStepId, onNext }) {
const { validateStep } = useFormValidation({ methods, steps, currentStepId });
const handleNext = async () => {
const isValid = await validateStep();
if (isValid) {
onNext();
}
};
return <button onClick={handleNext}>Next Step</button>;
}
Related
- Validation — How validation rules are compiled
- useFormState — Calls this hook to validate before step navigation