Navigating to the previous step should trigger a validation

[theor]

Bug report

Current Behavior

If a form step is invalid, the next button will be disabled after clicking on the previous button

Expected behavior

The valid step should be seen as valid and the next button should be enabled

Reproducible example

The materialui sample: https://codesandbox.io/s/material-formik-wizard-form-h37hs?from-embed

• fill the 1st step with valid fields
• click on next
• click on next. the step is invalid, so it disables the next button
• click on prev. the first step is valid, so the next button should be enabled again.

Suggested solution(s)

force a validation when going back ?

Additional context

Your environment

Software	Version(s)
Formik Wizard Form	2.0.1
Formik	2.2.9
React	17.0.2
TypeScript	4.1.2
Browser	chrome 95
npm/Yarn	yarn 1.22.11
Operating System	win 10

[carlosbensant]

As a workaround, I solved it by removing the disabled={isNextDisabled} from the Next button.

Being the button disabled or not, they won't be able to go next unless the form is valid (for the current step).

[carlosbensant]

I should note that I ended up forking this repo and adding a new line into the handleNext function to clean up the errors object. File: useWizard.ts

[skoruba]

@carlosbensant - can you share your fix please in the code? thanks

[mjangir]

I will look into the solutions today and will release a fix.

[skoruba]

I did two fixes in the file useWizard.ts:

1. clean up errors like mentioned @carlosbensant

 const handlePrev = useCallback(
    (formikBag: any) => async () => {
      let isValid = true;

      // cleanup errors
      formikBag.setErrors({});

      if (isFunction(beforePrev)) {
        try {
          await beforePrev!(formikBag.values, formikBag, currentStep);
        } catch (error) {
          isValid = false;
        }
      }

      if (isValid) {
        goToPrev();
      }
    },
    [goToPrev, currentStep, beforePrev]
  );

2. Set touched flag after validation for all fields - in method handleNext:

import { setNestedObjectValues } from 'formik';

if (validateOnNext) {
        const errors = await formikBag.validateForm();
        isValid = Object.keys(errors).length === 0;

        // set Touched to all fields
        if (!isValid) {
          formikBag.setTouched(setNestedObjectValues(errors, true));
        }
      }

This fix is very helpful in case where you have multiple fields in the form and you do not want to display all validation errors after touching the first input. I use for validation errors combination of errors['fieldName'] && touched['fieldName'] it is much better UX. 👍

Thanks!