How to enable revalidation on change after calling trigger() in multi-step form?

[Velkamhell97]

I have a multi-step form, when users click "Next", I validate current step fields using trigger():

const handleNextStep = async () => {
  const isValid = await trigger(['firstName', 'email']);
  if (isValid) setCurrentStep(2);
};

Problem: After trigger() validates fields, they don't revalidate on subsequent changes. If a user fixes an invalid field, the error persists until they click "Next" again.

Expected: After trigger() runs, those fields should continue revalidating on change like onSubmit

Is there a way to make trigger() "activate" ongoing validation for specific fields?

[sunnypatell]

why this happens

this is actually a well-known gap in how trigger() works vs handleSubmit(). the root cause is in react-hook-form's internal validation lifecycle, specifically the skipValidation function.

when rhf decides whether to revalidate a field on change, it checks formState.isSubmitted. the internal logic looks roughly like this:

// simplified from rhf source
if (isSubmitted) {
  // use reValidateMode (default: onChange) -> revalidates on change
} else {
  // use mode (default: onSubmit) -> only validates on submit
}

the key: trigger() does not set isSubmitted to true. only handleSubmit() does that. so after trigger() surfaces errors, rhf still thinks the form hasn't been submitted yet, and continues using your initial mode (which defaults to onSubmit). that's why fields don't revalidate on change -- rhf is correctly following its pre-submission validation strategy, it just doesn't know you've already shown errors to the user.

this has been discussed multiple times in the rhf community with no native fix yet.

solutions

there are a few approaches, ranging from simple config changes to more flexible patterns.

option 1: use mode: 'onTouched' (simplest)

if you can tolerate validation starting after the first blur on each field, this is the easiest fix. it doesn't depend on isSubmitted at all -- once a field is touched, it revalidates on every change.

const { register, trigger, formState: { errors } } = useForm({
  mode: 'onTouched',
});

with this mode, trigger() will still show errors, and once the user interacts with a field (blur or change), revalidation kicks in automatically. for most multi-step forms this feels natural because users have already interacted with the fields before clicking "next".

option 2: use handleSubmit() instead of trigger() (recommended)

the cleanest approach is to use handleSubmit() for step validation instead of trigger(). this sets isSubmitted properly and unlocks reValidateMode (which defaults to onChange).

the trick: use handleSubmit() but prevent actual form submission by not having a real <form> submit, or by handling it in the callback.

function MultiStepForm() {
  const [step, setStep] = useState(1);

  const { register, handleSubmit, formState: { errors } } = useForm({
    mode: 'onSubmit',          // default, validates on submit
    reValidateMode: 'onChange', // default, revalidates on change after submit
  });

  // step 1 fields
  const step1Fields = ['firstName', 'email'];

  const handleNext = handleSubmit(
    // onValid -- all fields passed, move to next step
    () => setStep(2),
    // onInvalid -- errors exist, stay on current step
    // (errors are already set in formState, revalidation is now active)
    () => {}
  );

  return (
    <div>
      {step === 1 && (
        <>
          <input {...register('firstName', { required: 'first name is required' })} />
          {errors.firstName && <span>{errors.firstName.message}</span>}

          <input {...register('email', { required: 'email is required', pattern: { value: /^\S+@\S+$/, message: 'invalid email' } })} />
          {errors.email && <span>{errors.email.message}</span>}

          {/* not a <form> submit, just a click handler */}
          <button type="button" onClick={handleNext}>Next</button>
        </>
      )}

      {step === 2 && (
        <>
          <input {...register('address', { required: 'address is required' })} />
          {errors.address && <span>{errors.address.message}</span>}

          <button type="button" onClick={() => setStep(1)}>Back</button>
          <button type="submit">Submit</button>
        </>
      )}
    </div>
  );
}

the downside of this approach is that handleSubmit() validates all registered fields, not just the ones on the current step. if fields from step 2 are already registered (e.g., you render them hidden), those will fail validation too.

you can work around this by conditionally rendering step fields (so only current step fields are registered), or by using the resolver approach below.

option 3: manual revalidation with watch + trigger (most flexible)

if you need trigger() specifically (e.g., for partial field validation), you can add your own onChange revalidation loop:

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const [hasValidated, setHasValidated] = useState(false);

  const { register, trigger, watch, formState: { errors } } = useForm();

  const step1Fields = ['firstName', 'email'] as const;

  // watch step 1 fields -- only revalidate after first trigger
  const watchedValues = watch(step1Fields);

  useEffect(() => {
    if (hasValidated) {
      trigger(step1Fields);
    }
  }, [watchedValues, hasValidated, trigger]);

  const handleNext = async () => {
    const isValid = await trigger(step1Fields);
    setHasValidated(true);
    if (isValid) {
      setHasValidated(false);
      setStep(2);
    }
  };

  return (
    <div>
      {step === 1 && (
        <>
          <input {...register('firstName', { required: 'first name is required' })} />
          {errors.firstName && <span>{errors.firstName.message}</span>}

          <input {...register('email', { required: 'email is required' })} />
          {errors.email && <span>{errors.email.message}</span>}

          <button type="button" onClick={handleNext}>Next</button>
        </>
      )}
    </div>
  );
}

this gives you full control but adds a bit of boilerplate. the hasValidated flag prevents revalidation from firing before the user has clicked "next" at least once.

option 4: mode: 'onChange' or mode: 'all' (nuclear option)

setting mode: 'onChange' or mode: 'all' means every field validates on every change from the start, regardless of isSubmitted. this definitely solves the problem but comes with tradeoffs:

• more re-renders (every keystroke triggers validation)
• users see errors before they've finished typing
• can feel aggressive on long forms

const form = useForm({ mode: 'all' }); // validates on both blur and change

for a short multi-step form this might be perfectly fine. for larger forms with expensive validation (e.g., async checks), it can hurt performance.

which one should you pick?

approach	pros	cons
mode: 'onTouched'	simple, good ux	errors show on first blur, not on "next" click
handleSubmit() per step	proper lifecycle, revalidation works natively	validates all registered fields, not just current step
watch + trigger loop	full control, works with partial fields	more code, extra re-renders from watch
mode: 'onChange' / 'all'	zero config	aggressive validation, performance cost

for most multi-step forms, i'd go with option 2 (handleSubmit per step) since it works with rhf's design rather than against it. if you need to validate only specific fields per step, option 3 gives you the most control.

relevant docs

• useForm mode -- validation strategy config
• trigger() -- manual validation api
• formState -- isSubmitted and related flags
• advanced usage: wizard/funnel -- official multi-step patterns

[tamish-max]

trigger() is great for step gating, but it doesn’t switch the form into the same “post-submit revalidate on change” flow that handleSubmit() does.

If you want “after the first Next click, keep revalidating this step on change”, I’d usually model that explicitly:

const stepFields = ['firstName', 'email'] as const
const watchedStepValues = useWatch({ control, name: stepFields })
const [stepAttempted, setStepAttempted] = useState(false)

useEffect(() => {
  if (!stepAttempted) return
  void trigger(stepFields)
}, [stepAttempted, watchedStepValues, trigger])

const handleNext = async () => {
  const ok = await trigger(stepFields)
  setStepAttempted(true)

  if (ok) {
    setStepAttempted(false)
    setCurrentStep(2)
  }
}

That keeps validation scoped to the current step instead of switching the whole form to mode: 'onChange'.

If you want the simplest UX, mode: 'onTouched' is also a decent compromise for multi-step forms.

[chrisjcthomas]

When you manually call trigger(['firstName', 'email']), React Hook Form runs validation on those fields and populates the errors object in formState.

However, calling trigger() does not automatically change the field's internal validation subscription state. If your form is configured with the default validation mode (which is onSubmit), fields will not start validating on every keystroke (onChange) until a formal submit action has been attempted.

To achieve the behavior where fields continue revalidating on change once they have been validated/triggered, you can use one of the following approaches:

1. Conditional Revalidation via onChange in register (Recommended)

You can hook into the onChange callback of the input registration. If the field already has an active validation error, call trigger() for that field to validate and clear the error on subsequent changes:

const { register, formState: { errors }, trigger } = useForm({
  mode: "onSubmit" // or default
});

return (
  <input
    {...register("firstName", {
      required: "First name is required",
      onChange: () => {
        // Only run trigger on change if there is already an error,
        // preventing premature validation until the user has triggered it.
        if (errors.firstName) {
          trigger("firstName");
        }
      }
    })}
  />
);

2. Switch to onTouched or onBlur Mode

If you want fields to validate automatically as soon as the user interacts with them and tabs away, switch the form's global validation mode to onTouched or onBlur:

const { register } = useForm({
  mode: "onTouched" // Validates on blur first, then on change once touched
});

3. Manually track "validated" state

If you want to restrict onChange validation strictly to after the "Next" button is clicked, you can keep track of a isStepValidated state and pass it to the onChange event:

const [stepValidated, setStepValidated] = useState(false);

const handleNextStep = async () => {
  const isValid = await trigger(['firstName', 'email']);
  setStepValidated(true);
  if (isValid) setCurrentStep(2);
};

// In your input:
onChange: () => {
  if (stepValidated) trigger("firstName");
}

[poetryofcode]

The root cause: trigger() validates fields but doesn't flip isSubmitted to true. RHF uses isSubmitted to decide whether to revalidate on change so after trigger(), the form stays in "validate on blur/submit" mode instead of switching to continuous revalidation.

---

Quick fix set reValidateMode: 'onChange'

const form = useForm({
  mode: 'onTouched',          
  reValidateMode: 'onChange', 
})

This alone often solves it. Once trigger() surfaces an error, onChange revalidation kicks in and clears it as the user types.

---

Finer control revalidate only when errors already exist

If you don't want to revalidate on every keystroke before the user has done anything wrong:

const { trigger, watch, formState: { errors } } = useForm()

const stepOneFields = ['firstName', 'email'] as const
const stepOneValues = watch(stepOneFields)

useEffect(() => {
  const hasStepError = stepOneFields.some((f) => errors[f])
  if (hasStepError) trigger(stepOneFields)
}, [stepOneValues])

This only triggers revalidation after an error has been shown — not on every keystroke from the start.

---

Full multi-step pattern

const STEP_FIELDS = {
  1: ['firstName', 'lastName', 'email'],
  2: ['address', 'city', 'zip'],
  3: ['cardNumber', 'expiry', 'cvv'],
} as const

const handleNext = async () => {
  const fields = STEP_FIELDS[currentStep]
  const valid = await trigger(fields)
  if (valid) setCurrentStep((s) => s + 1)
}

// Revalidate current step on change, but only after errors exist
const currentFields = STEP_FIELDS[currentStep]
const currentValues = watch(currentFields)

useEffect(() => {
  const hasError = currentFields.some((f) => errors[f])
  if (hasError) trigger(currentFields)
}, [currentValues])

This gives you:

• No premature validation (user types freely until they hit "Next")
• Instant error clearing once errors have been surfaced
• Revalidation scoped to only the current step's fields

If you have large steps with many fields, debounce the trigger call inside the effect by 150–300ms to avoid firing on every keystroke.

Happy to clarify or adjust for your specific setup!