S

useFormValidation

Per-step field validation using React Hook Form's trigger method.

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. useFormState calls it internally. Use it when building custom step validation logic.


Signature

import { useFormValidation } from '@saastro/forms';

const { validateStep } = useFormValidation({ methods, steps, currentStepId });

Parameters

ParameterTypeDescription
methodsUseFormReturnReact Hook Form instance
stepsStepsSteps configuration map
currentStepIdstringThe step to validate

Return Value

PropertyTypeDescription
validateStep() => Promise<boolean>Validates current step fields. Returns true if valid

How It Works

  1. Looks up the current step’s field list from steps[currentStepId]
  2. Calls methods.trigger(fields, { shouldFocus: true }) — React Hook Form validates only those specific fields
  3. If invalid, shows a toast notification and auto-focuses the first errored field
  4. Returns true if all fields pass, false otherwise

Edge cases:

  • Returns false if the step ID doesn’t exist in steps
  • Returns true if the step has no fields (empty steps always pass)
  • Catches unexpected exceptions and returns false with 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>;
}

  • Validation — How validation rules are compiled
  • useFormState — Calls this hook to validate before step navigation