Why Formik `isValid` Doesn’t Update Correctly in Multi-Step Forms (And the Fix That Worked for Me)

Shivani R — Sat, 09 May 2026 06:13:21 +0000

While building a multi-step form using React + Formik, I ran into a frustrating issue:

👉 The Next button stayed enabled even after moving to a new step with empty required fields.

At first, everything looked correct:

Separate validation schema per step
isValid used to disable navigation
Dynamic step rendering

But Formik validation state wasn’t updating properly when the step changed.

Here’s what was happening — and the solution that finally worked.

🧠 The Problem

I had a setup like this:

<Formik
  initialValues={initialValues}
  validationSchema={multiPageFormsValidationSchema[currentStep]}
  onSubmit={handleSubmit}
>
  // form logic
</Formik>

Each step had its own validation schema.

The issue:

Step 1 becomes valid → isValid = true
Move to Step 2
New fields are empty
❌ isValid still remains true

This caused the Next button to stay enabled incorrectly. But it would get disabled if its clicked with empty fields.

⚠️ Why This Happens

Formik does not automatically re-run validation properly when:

the validation schema changes dynamically
the form step changes
fields are conditionally rendered

So even though the schema changes:

validationSchema={multiPageFormsValidationSchema[currentStep]}

Formik continues using stale validation state until another user interaction happens.

🔥 The Solution That Worked for Me

What finally fixed it was:

const formik = useFormik({
   initialValues,
   onSubmit: (values) => onSubmit(values),
   validationSchema: multiPageFormsValidationSchema[currentStep],
})

const { values, resetForm, validateForm, handleSubmit, isValid } = formik;

useEffect(() => {
  const checkFormValidation = async () => {
    resetForm({ values });
    await validateForm();
  };

  checkFormValidation();
}, [currentStep]);

<FormikProvider value={formik}>
  <Form onSubmit={handleSubmit}>
    // form logic
  </Form>
</FormikProvider>

✅ Why This Works

`resetForm({ values })`

This forces Formik to:

reset Formik’s internal state while preserving the current form values
reinitialize touched/errors state correctly
acknowledge the new schema properly

Without this, Formik sometimes keeps stale validation metadata from the previous step.

`validateForm()`

This immediately re-runs validation for the current step schema.

So when the step changes:

new fields get validated instantly
isValid updates correctly
navigation buttons behave properly

Why I Used useFormik + FormikProvider Instead of the Component

This gave me more control over the form instance and validation lifecycle.

Since my form behavior depended heavily on:

dynamic step changes
manually triggering validation
resetting form state
accessing Formik methods inside useEffect

Using useFormik made the logic easier to manage. It also allowed me to directly access methods like:

resetForm();
validateForm();

without relying on render props or hooks inside nested components.

For multi-step forms with dynamic validation flows, this pattern felt much cleaner and more flexible than the standard wrapper.

🧪 Final Result

Now when the user changes steps:

validation updates immediately
isValid reflects current step state
buttons enable/disable correctly

🤔 Other Approaches I Tried (And Their Problems)

1. Using `validateOnMount`

<Formik validateOnMount />

❌ Problem

This helps only during initial mount.

It does not reliably solve:

dynamic schema switching
multi-step validation transitions

Especially when fields change between steps.

2. Validating Step Fields Manually

const isStepValid = currentStepFields.every(
  (field) => !formik.errors[field]
);

❌ Problem

This adds a lot of manual logic:

field tracking
nested fields handling
dynamic arrays
conditional fields

It works, but becomes difficult to maintain in large forms.

3. Using only `validateForm()`

useEffect(() => {
  validateForm();
}, [currentStep]);

❌ Problem

This triggered validation immediately when moving to the next step, causing all fields in the new step to instantly show validation errors before the user interacted with them.

💡 What I Learned

Formik works great for standard forms.

But with:

dynamic validation schemas
multi-step flows
conditional rendering

👉 you sometimes need to manually synchronize validation state.

The tricky part wasn’t validation itself — it was getting Formik to fully recognize the schema transition.

🚀 Final Thoughts

Debugging this issue made me realize that multi-step forms often require more control over Formik’s internal lifecycle than standard forms do.

Even though the validation schema was updating correctly, Formik wasn’t immediately recalculating the validation state for the newly rendered step.

Using:

resetForm({ values });
await validateForm();

helped ensure that both the form state and validation state stayed in sync during step transitions.

If you’ve run into similar issues while building multi-step forms with Formik, I’d be interested to hear what approach worked for you.

DEV Community: Shivani R

Why Formik `isValid` Doesn’t Update Correctly in Multi-Step Forms (And the Fix That Worked for Me)

🧠 The Problem

⚠️ Why This Happens

🔥 The Solution That Worked for Me

✅ Why This Works

resetForm({ values })

validateForm()

Why I Used useFormik + FormikProvider Instead of the Component

🧪 Final Result

🤔 Other Approaches I Tried (And Their Problems)

1. Using validateOnMount

❌ Problem

2. Validating Step Fields Manually

❌ Problem

3. Using only validateForm()

❌ Problem

💡 What I Learned

🚀 Final Thoughts

`resetForm({ values })`

`validateForm()`

1. Using `validateOnMount`

3. Using only `validateForm()`