formik icon indicating copy to clipboard operation
formik copied to clipboard

initialValues={validationSchema.cast({})} breaks form validation

Open Vercjames opened this issue 1 year ago • 2 comments

Bug report

using .cast({}) causes form validation to stop working

Current Behavior

the Yup cast method is not instantiating form validation

Expected behavior

Form validation should behave as normal.

Reproducible example

this code works:

 const initialValues = {
    name: "test",
  }
  
  const validationSchema = Yup.object().shape({
    name: Yup.string().required("Category Name is required").default(""),
  })
  
 ...
  <Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={(values) => { console.log(values) }}
  >
  {({ values, handleChange, errors, touched, handleBlur }) => (
    <Form>
      <input
        type="text"
        name="name"
        value={values.name}
        onBlur={handleBlur("name")}
        onChange={handleChange("name")}
      />
      {errors.name && touched.name && (
        <div>
          {errors.name}
        </div>
      )}
    </Form>
  )}
</Formik>

this code does not:

  const validationSchema = Yup.object().shape({
    name: Yup.string().required("Category Name is required").default("test"),
  })
 ...
  <Formik
     validationSchema={validationSchema.cast({})}
    validationSchema={validationSchema}
    onSubmit={(values) => { console.log(values) }}
  >
  {({ values, handleChange, errors, touched, handleBlur }) => (
    <Form>
      <input
        type="text"
        name="name"
        value={values.name}
        onBlur={handleBlur("name")}
        onChange={handleChange("name")}
      />
      {errors.name && touched.name && (
        <div>
          {errors.name}
        </div>
      )}
    </Form>
  )}
</Formik>

Suggested solution(s)

fix issue where .default("ANY VALUE") breaks form validation.

Your environment

Software Version(s)
Formik 2.2.9
React 18.2.0
TypeScript 5.0.2
Browser Chrome
npm/Yarn 1.22.19
Operating System Mac

Vercjames avatar Aug 16 '23 22:08 Vercjames

Confirmed on my react-native app as well. This code example from the docs works perfectly.

But as soon as I introduce a validationSchema I can't handle submitting anymore.

@Vercjames What's your yup version?

Mine was

"yup": "^0.32.11"

yup maintainers recently reverted a change https://github.com/jquense/yup/commits/master You probably pulled a broken version.


Edit I tried to bump dependencies to

"formik": "^2.4.3",
"yup": "^1.2.0"

I still experience this issue and I noticed I have a problem with some schema but not all of them.

// ✅ works
export const gtinSchema = Yup.object().shape({
  gtin: Yup.string()
    .min(8, "error.gtinMinLength")
    .max(14, "error.gtinMaxLength")
    .required("error.required"),
});

// ❌ broken with `validationSchema` and `onSubmit`
export const priceSchema = Yup.object().shape({
  price: Yup.number().min(0, "error.priceMinLength").required("error.required"),
});

flexbox avatar Aug 17 '23 10:08 flexbox

@Vercjames could you confirm with the latest version? Thank you!

quantizor avatar Sep 11 '23 14:09 quantizor