I currently have an object that looks like the following:

const initialValues = {
  created: {
    position: 1,
    name: 'created',
    type: 'timestamp',
    desc: 'The date and time the lead is created',
    mapping: {
      name: '',
      defaultValue: '',
      map: false
    }
  }
}

I would like the name within the mapping object to bee required when the map value within the map object is set to a value of true. I have attempted this by doing the following:

const validationSchema = yup.object({
  created: yup.object().when('mapping.map', {
    is: true,
    then: yup.object({
      mapping: yup.object({
        name: yup.string().required('name is required')
      })
    })
  })
})

I believe I'm not tunneling enough in order to accurately set up the validation for the mapping object, any and all help/suggestions would be greatly appreciated.

I currently have an object that looks like the following:

const initialValues = {
  created: {
    position: 1,
    name: 'created',
    type: 'timestamp',
    desc: 'The date and time the lead is created',
    mapping: {
      name: '',
      defaultValue: '',
      map: false
    }
  }
}

I would like the name within the mapping object to bee required when the map value within the map object is set to a value of true. I have attempted this by doing the following:

const validationSchema = yup.object({
  created: yup.object().when('mapping.map', {
    is: true,
    then: yup.object({
      mapping: yup.object({
        name: yup.string().required('name is required')
      })
    })
  })
})

I believe I'm not tunneling enough in order to accurately set up the validation for the mapping object, any and all help/suggestions would be greatly appreciated.

• javascript
• reactjs
• formik
• yup

1 Answer 1

I found the solution doing the following:

const validationSchema = yup.object({
  created: yup.object().shape({
    mapping: yup.object().shape({
      map: yup.boolean(),
      defaultValue: yup.string(),
      name: yup.string().when('map', {
        is: true,
        then: yup.string().required('name is required')
      })
    })
  })
})