Conditional Yup Validation is not working

Question

I have formik form with below initialValues

 const initialValues1 = { 
   people: [
   {
     id: Math.random(),
     email: "",
     isNewUser: true,
     profile: {
       firstName: "",
       lastName: "",

     }
   }
  ]
 };

I want to validate firstName and lastName only when is isNewUser is true by Yup I am trying below but it is not working. How can validate conditionally in Formik Yup

 people: Yup.array().of(
  Yup.object().shape({
    isNewUser: Yup.boolean(),
    profile: Yup.object().shape({
        firstName: Yup
          .string()
          .when('isNewUser', {
            is: true,
            then: Yup.string().required("First name is required")
          }),
     })
   })
  )

Muhammad Bilal · Accepted Answer · 2022-12-22 18:52:11Z

1

formatted code in IDE

people: Yup.array().of(
Yup.object({
    isNewUser: Yup.boolean(),
    profile: Yup.object().when('isNewUser', {
        is: true,
        then: Yup.object({
            firstName: Yup.string().required('First name is required'),
        })
    })
})
);

isNewUser is sibling of profile attribute, so we can use it in when for defining profile schema not it's child(first_name) schema directly.

you can also specify else part using otherwise key

when({ 'attrbute', is: 'func or value', then: 'schema if is true', otherwise: 'schema if is false'})

edited Dec 22, 2022 at 18:52

answered Dec 22, 2022 at 18:46

Muhammad Bilal

115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guru Hadadi · Accepted Answer · 2020-04-25 01:56:37Z

0

As per docs ,

Adjust the schema based on a sibling or sibling children fields. You can provide an object literal where the key is is value or a matcher function, then provides the true schema and/or otherwise for the failure condition.

So move the isNewUser to reflect as sibling. Like this:

const initialValues1 = { 
   people: [
   {
     id: Math.random(),
     email: "",
     //isNewUser: true, // <--------------- remove this
     profile: {
       firstName: "",
       lastName: "",
       isNewUser: true // <---------------- here.
     }
   }
  ]
 };

answered Apr 25, 2020 at 1:56

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

2 Comments

Garrett Motzner Over a year ago

I had to read the docs there a few times, and they are still tricky to read. But I think what is meant by that is ".when adjusts the schema based on a sibling or sibling children fields. You can provide .when either a config object or a function that returns the proper schema based on the sibling value. If the config object has the key is, that value is === compared to the sibling value. Alternatively the config object can be given a matcher function at the key value. In either case, the key then specifies the schema when the condition matches..."

Garrett Motzner Over a year ago

So I would say the docs are not recommending you adjust your data, but rather that when adjusts the validation schema based on a sibling value. It would be a poor library if it made demands on how your data must be structured, so I think there is a solution that doesn't require data structure changes, but it isn't easy to find so far...

Collectives™ on Stack Overflow

Conditional Yup Validation is not working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related