isValid is false although all fields are valid

[burtek]

🐛 Bug report

Current Behavior

According to validation reference FAQ returning undefined as error message is considered as marking field valid. Yet returning { fieldName: undefined } from validation function sets isValid tofalse thus preventing form from submitting. This is caused by following line in code:

https://github.com/jaredpalmer/formik/blob/85d15b302cd776eb615064a4451e1a7575b1439d/src/Formik.tsx#L425

Expected behavior

Returning { fieldName: undefined } from validation function should set isValid to true

Reproducible example

https://codesandbox.io/s/py95r24n7x

Typing anything in the field changes form state, but keeps isValid set to false

If you change validate to const validate = values => ({});, isValid will be set to true

Suggested solution(s)

At least change the docs. To make the validation work according to current docs, you'd need to check all values (incl. nested values) in object returned by validation function.

Your environment

Software	Version(s)
Formik	1.3.2

[motiazu]

The documentation is pretty weird around that line. This is the code that decides whether you have errors. Object.keys(this.state.errors).length - this snippet pretty much means that any set field (even with undefined) will result in isValid being false.

I recommend clearing your own object of any undefined properties before returning the validation errors to formik. This could work before returning -

Object.keys(errors)
    .filter(key => errors[key] !== undefined)
    .reduce((res, key) => {
        res[key] = errors[key];
        return res;
    }, {})

[webberwang]

An issue relating to isValid, not sure if I should start a new issue.

I noticed that the isValid field stays false after submitting a form if the values are set using initialvalues. If the onChange is triggered, then the isValid will be correct.

https://codesandbox.io/s/302vp2wqxq

[barrett-vegas-com]

@webberwang I ran into the same issue, but then found https://jaredpalmer.com/formik/docs/api/formik#isinitialvalid-boolean

[jp94]

@webberwang This seems be to work for me. Using @barrett-vegas-com response with isInitialValid,

const validate = (values: Values): FormikErrors<Values> => { ... };
const isInitialValid = (values: FormikConfig<Values> & IProps) =>
  Object.keys(validate(values.initialValues)).length === 0;

withFormik({ ...  
 isInitialValid,
 validate
})

[emil-alexandrescu]

In case you are using yup

const isInitialValid = schema.isValidSync(initialValues);

[jaredpalmer]

This has been addressed is #1410

[webpipl]

An issue relating to isValid, not sure if I should start a new issue.

I noticed that the isValid field stays false after submitting a form if the values are set using initialvalues. If the onChange is triggered, then the isValid will be correct.

https://codesandbox.io/s/302vp2wqxq

put this inside

isInitialValid={true}

its working .. on Edit Form initial values always true....

suggested Link

https://jaredpalmer.com/formik/docs/api/formik#isinitialvalid-boolean

[vinodh99]

Is there a way to set the is valid manually? When I set the field value from session storage and pass the same value to the initial values, the invalid is being set to true upon error though I trigger setFieldError.

[rob10e]

@vinodh99 Try this:

const initialValues = {
... initial values
};
<Formik
  .... other props
  initialValues={initialValues}
  validationSchema={schema}
  isInitialValid={schema.isValidSync(initialValues)}
>
... rest of code
</ Formik>

[andrew-aladev]

This issue has been fixed in 2.x only, 1.x versions has to use isInitialValid.

[pdancewicz]

I'm still having this issue. I'm using version 2.1.5 and even without any validation isValid is always false

[jrrewers]

I'm still having this issue. I'm using version 2.1.5 and even without any validation isValid is always false

Have you managed to find a way around or a fix for this?

[andrew-aladev]

Hello guys, I am using formik@1.4.3 and the following code works perfect:

<Formik
  initialValues={initialValues}
  validationSchema={schema}
  isInitialValid={() => schema.isValidSync(initialValues)}
  onSubmit={onSubmit}
  enableReinitialize
>
...

Please try with your projects.

[jrrewers]

  isInitialValid={() => schema.isValidSync(initialValues)}

That works, thanks! But when I do isInitialValid={schema.isValidSync(initialValues)} it fails.

[quorak]

I also needed the initial error object to be correct. I wrote this little helper for sync cases:

import { useMemo } from 'react'
import { FormikErrors, yupToFormErrors } from 'formik'
import { ObjectSchema } from 'yup'

export default function useInitialErrorsSync(
  schema: ObjectSchema,
  initialValues: any,
): [boolean, FormikErrors<any>] {
  const values: [boolean, FormikErrors<any>] = useMemo(() => {
    try {
      schema.validateSync(initialValues, { abortEarly: false })
    } catch (err) {
      if (err.name === 'ValidationError') return [false, yupToFormErrors(err)]
    }
    return [true, {}]
  }, [])
  return values
}

can be used like

  ...
  const [isInitialValid, initialErrors] = useInitialErrorsSync(schema, initialValues)
  return <Formik
                  validateOnChange
                  validateOnBlur
                  validateOnMount
                  validationSchema={schema}
                  isInitialValid={isInitialValid}
                  initialErrors={initialErrors}
                  initialValues={initialValues}
                  onSubmit={onSubmit}
                >
   ...

[EDMONDGIHOZO]

isInitialValid is deprecated and will be removed in formik soon, it is advised to use validateOnMount

[maciej-wira]

Hello guys, I am using formik@1.4.3 and the following code works perfect:

<Formik
  initialValues={initialValues}
  validationSchema={schema}
  isInitialValid={() => schema.isValidSync(initialValues)}
  onSubmit={onSubmit}
  enableReinitialize
>
...

Please try with your projects.

In my case enableReinitialize was the game changer.