formik
formik copied to clipboard
initialValues={validationSchema.cast({})} breaks form validation
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 |
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"),
});
@Vercjames could you confirm with the latest version? Thank you!