Formik's "isValid" reporting true even though validation schema reports an error

user_563915 0
Viewed 1694

It looks like Formik's flag "isValid" is set to true in certain cases, even if the form values should not be considered valid. I have a working codesandbox example below where this is showcased.

https://m229l.csb.app/

The validation schema that I am using for my form is the following:

const validationSchema = Yup.object().shape(
  {
    heading: Yup.string().required('Heading required.'),
    image: Yup.string().when('placeholder', {
      is: '',
      then: Yup.string().required(
        'Please either choose an image, or a placeholder.'
      ),
      otherwise: Yup.string(),
    }),
    placeholder: Yup.string().when('image', {
      is: '',
      then: Yup.string().required(
        'Please either choose an image, or a placeholder.'
      ),
      otherwise: Yup.string(),
    }),
  },
  [['image', 'placeholder']]
);

When outputting Formik's isValid flag, it is true for the following values:

{ heading: 'a', image: '', placeholder: '' }

The schema states that one of the fields "image" or "placeholder" must be present, but in the case above, they are not. Yet the isValid flag is true.

When testing this manually with Yup, I get the expected result though:

validationSchema.validate(values).then(...).catch(...);

This can further be seen in the codesandbox. What am I missing here? Is there more happening behind the scenes when Formik is validating the values?

yup formik reactjs
1 Answers

I also faced the same issue hence along with formik.isValid, I used an another attribute formik.touched and considered the form to be valid only when formik.isValid = true and Object.keys(formik.touched).length > 0 (at least some fields should be touched) as below:

const isFormValid = formik.isValid && Object.keys(formik.touched).length > 0; // WITH lodash: formik.isValid && !_.isEmpty(formik.touched)
if (isFormValid) {
 // NOW SUBMIT THE FORM OR DO YOUR NEXT STEP
}
user_28335160
Related