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