resolvers: Yup resolver problem with test function

Hello,

It seems there is a problem with the yupResolver, when there is a schema with test function.

This a CodeSandbox to reproduce the problem: https://codesandbox.io/s/yup-resolver-problem-with-yup-test-function-16r4d?file=/src/App.js

The form example has 3 inputs. The age is required, only here to illustrate that individual field can throw, as expected, an error. But the test function, which checks if email or name are present, does not throw a ValidationError.

The onSubmit method shows that there is no error and that the data is an empty object. 😢

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 31 (18 by maintainers)

Commits related to this issue

fix #43 with yup.test — committed to react-hook-form/resolvers by bluebill1049 4 years ago

Most upvoted comments

Yup’s validation doesn’t work as expected even for required for file types when using with resolver. Wasted so much time on this to work but nothing worked. Finally removed the file validation from Yup and handled on server side. Still Looking for the solution.

RNKushwaha on Nov 8, 2020

So the quick fix for now is to return true (or false 🤷) if the validation passes, and to throw Error if the validation fails. This will create an error with name ‘undefined’… not ideal, but is a good enough patch until I figure out whats going on.

const schema = yup
  .object({
    name: yup.string(),
    email: yup.string()
  })
  .test("globalError", "Email and name are required", function (value) {
    if (!_.isEmpty(value.name) && !_.isEmpty(value.email)) {
      return true;
    }
    throw Error("This Broke");
  });

pmaier983 on Aug 15, 2020

hey @pmaier983, would you be interested to give a crack on this one?

bluebill1049 on Aug 15, 2020

It’s not that. The undefined is due to the custom resolver and how it rebuilds an error object.

But Yup has sended this:

{
   "name":"ValidationError",
   "value":{
      "name":"",
      "email":""
   },
   "errors":[
      "Email or name are required"
   ],
   "inner":[
      {
         "name":"ValidationError",
         "value":{
            "name":"",
            "email":""
         },
         "type":"globalError",
         "errors":[
            "Email or name are required"
         ],
         "inner":[

         ],
         "message":"Email or name are required",
         "params":{
            "path":"this",
            "value":{
               "name":"",
               "email":""
            },
            "originalValue":{
               "name":"",
               "email":""
            }
         }
      }
   ],
   "message":"Email or name are required"
}

I suspect that “path”:“this”, is not well evaluated and returns undefined.

pom421 on Aug 14, 2020