Formik: isInitialValid with Yup

[eric-basley]

I'm using Yup has schema validator, but cannot find a way to use isInitialValid with Yup!
Yup schema validation is asynchronous, isInitialValid synchrone

How can we plug all together to check validation of initialValues ?

Why don't you check validation of initialValues at mount time ?

Regards.

Thanks for your work.

Eric

[jaredpalmer]

isInitialValid needs to be sync to support SSR so that limits what we can do here. See #94 #97

[rosskevin]

@ctavan forked yup so he could move forward sync. https://github.com/ctavan/jupp

Perhaps that helps?

[frank-west-iii]

@jaredpalmer, this was closed with the comments that isInitialValid needs to be sync and then the comment that yup is now sync. However it is not clear to me how to make isInitialValid use my validationSchema to set it's value. Any direction would be awesome. Cheers.

[pedromagalhaes]

Hi all, any example of this implementation? I couldnt find it working without having to do a change in the form. Im looking for a solution to get isValid of the form on load. Im using Yup validations and wrapping it WithFormik. Thanks

[randycoulman]

For anyone stumbling across this issue, I was able to make something like the following work:

const validationSchema = /* your schema here */;
const mapPropsToValues = /* your mapper here */;

export const Form = withFormik({
  isInitialValid: props => validationSchema.isValidSync(mapPropsToValues(props)),
  mapPropsToValues,
  validationSchema,
  ...otherFormikOptions
})(MyForm);

[Sarvarr]

If you want to send data via props, you can do the following

const validationSchema = (props)=>{ 
return Yup.object().shape({
/* your validation */
})
 }
const mapPropsToValues = (props)=>{
return {
 /* your values */
}
}

export const Form = withFormik({
  isInitialValid: props => validationSchema(props).isValidSync(mapPropsToValues(props)),
  mapPropsToValues,
  validationSchema,
  ...otherFormikOptions
})(MyForm);