formik: Using validationSchema returns empty errors object

šŸ› Bug report

Current Behavior

I threw together a quick codesandbox to prototype a concept, and my Yup-based validationSchema always resulted in an empty errors object on submit.

I jumped into the official Formik codesandbox playground and realized the same thing was happening:

formik-validation-schema

Expected behavior

I would have expected { errors: { email: 'Required' } } but perhaps I’m missing something.

Your environment

Software Version(s)
Formik 1.2.0
React 16.5.0
Yup 0.26.3 (0.26.6 on my sandbox)
TypeScript
Browser Firefox, 63.0.3
npm/Yarn
Operating System

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 25
  • Comments: 35 (6 by maintainers)

Most upvoted comments

@jaredpalmer this still seems to be an issue. Upgrading to the latest version of formik in the sandbox example doesn’t seem to help either šŸ˜•

I set initialValues with default values on my object but it is not working for me neither. I use

    "formik": "^1.5.2",
    "react": "^16.8.6",
    "yup": "^0.27.0"

any news on this issue @jaredpalmer ?

Will fix in the morning

I had the same problem and apparently was a date input receiving an invalid date preventing the whole schema to be validated, once I updated the default value of that input it worked like a charm. Hope it helps somebody 😃

@VicJer What did you change exactly? And is there any fix that can be made that shows proper behavior in https://codesandbox.io/s/qJR4ykJk ?

Running into this error right now; but it’s not easy to reproduce. In an effort to debug I have an empty schema (validationSchema={{}}) prop and all plain <Field name="foo" /> elements. Unfortunately it’s still occurring.

I’ve solved this by using an empty YUP validation schema instead of an empty object, like const validationSchema = object().shape({})

hope that helps

Running into this error right now; but it’s not easy to reproduce. In an effort to debug I have an empty schema (validationSchema={{}}) prop and all plain <Field name="foo" /> elements. Unfortunately it’s still occurring.

Well, lost a couple of hours of my day because I forgot () in the validationSchema

 object: Yup.object({
            key  : Yup.string,   // don't forget your ()'s.
            value: Yup.boolean(),
        }),

hope this helps another lost soul.

edit: This won’t throw an error, it just wont validate anything returning an empty object.

It works fine on Chrome but not on Firefox. I ran the official Formik codesandbox and same bug happened. I’m getting an empty error object. I tested this on > v2.0.1-rc.5 (release where this bug was declared as fixed)

I had this problem when trying to use Yup.string().number() - thinking that the ā€˜number’ part would be an in-built method to check for non-numerical characters. This took me a bit longer than I would have hoped to solve because it didn’t throw up any error - but it broke the validation across ALL areas of my app using it. Note to self: actually check that a method exists before using it!

@silvioBi Thank you - my problem was a bit different but your post definitely helped me look in the right place!

I now see the following error, Using the same code as my previous post, whenever a field is blurred or a submit event happens

app.js:18476 Uncaught (in promise) TypeError: schema[(intermediate value)(intermediate value)(intermediate value)] is not a function at validateYupSchema (app.js:18476)

Which fails here

`function validateYupSchema(values, schema, sync, context) { if (sync === void 0) { sync = false; }

if (context === void 0) { context = {}; }

var validateData = {};

for (var k in values) { if (values.hasOwnProperty(k)) { var key = String(k); validateData[key] = values[key] !== ā€˜ā€™ ? values[key] : undefined; } }

return schema[sync ? ā€˜validateSync’ : ā€˜validate’](validateData, { abortEarly: false, context: context }); }`

Are there specific docs for V2 setup ? I have upgraded to v2.0.1-rc.11 but haven’t changed anything else in my application. I am quite a newbie when it comes to React and Formik so am sure it’s just me doing things wrong. But any help would be appreciated

I found what wrong, I forgot to used object().shape({}) for my nested object. So my yup schema was failing. @jaredpalmer would it be possible to log an error when yup reject the promise? at the moment it is silently failing.

I’m new to Formik and Yup, so it’s definitely possible I’ve done something wrong, but it works as expected in Chrome. And I see the same behavior in the official Codesandbox examples. I’ll try to dig in a bit and see if this is a problem with Yup itself, or with Formik’s implementation of Yup.

EDIT: I was able to get a basic Yup example working in Firefox, Safari, and Chrome.

EDIT 2: I was able to get a basic Formik + Yup example working in Firefox, Safari, and Chrome too! So I’m not sure where the problem is šŸ¤”

The line in question is here: https://github.com/jaredpalmer/formik/blob/master/src/Formik.tsx#L685

Could it be that when a non-Yup error is thrown during validation, that isn’t being caught properly?

Seems the same happens when you use withFormik and schema wrapper no errors are ever populated.