How to validate an object with a key inside it in Yup Validation

Question

This is a snippet in my React application using Formik.

My initial value is

initialValues: {
    country: { label: '', value: '' }
}

My field input is country which is a Select option and its value when selected will be as

country: { label: 'India', value: 'India' }

My required error object when a country is not selected should be

{ country: "Please select a country" }

How can I add a yup validation to get my required error when a country is not selected, or in other means when country.value === ''?

I wrote a validation like this

country: yup.object().shape({
        value: yup
            .string()
            .label('Country')
            .required("Please select a country"),
})

which is wrong and this gives the error object as country: { value: "Please select a country" } which is not as my requirement.

What changes should I do here?

Bassem · Answer 1 · 2020-05-12T12:37:31.517

0

The value: '' is considered a missing value for strings, so most validations besides .required() ignore it. In this case, you can either:

Set a default country value
Or remove the .required() rule.

edited May 12 '20 at 12:37

answered May 11 '20 at 17:43

Bassem

3,582
2
24
47

I found the answer is updated as the answer for this question – Hareesh May 12 '20 at 14:59

score 0 · Answer 2 · answered May 12 '20 at 14:57

I found the answer as follows.

country: yup
        .object()
        .test(
          'country', 
          'Please select Country', 
          val => !val.value ? false : true,
        )

This will check if value key inside the country object and return false if empty and the given error will be assigned directly to the country object as required.

score 0 · Answer 3 · answered Jan 20 '23 at 14:41

country: Yup.object()
  .shape({
    label: Yup.string().ensure().required(),
    value: Yup.string().ensure().required(),
  })
  .required("Country cannot be empty")
  .nullable()

In my case, initial value of the country is null, and then it receives an object when the change is triggered.

How to validate an object with a key inside it in Yup Validation

3 Answers3