I want to validate the array on the base of loan register if loan register is true then array should validate else not.

yup.object().shape({
                
                loan_register: yup.boolean(),
                loans: yup.array()
                    .of(
                        yup.object().shape({
                            bank_name: yup.string().required(),
                            bank_reg_no: yup.string().required(),
                            loan_amount: yup.string().required(),

                        })
                    )

            })

I want to validate the array on the base of loan register if loan register is true then array should validate else not.

yup.object().shape({
                
                loan_register: yup.boolean(),
                loans: yup.array()
                    .of(
                        yup.object().shape({
                            bank_name: yup.string().required(),
                            bank_reg_no: yup.string().required(),
                            loan_amount: yup.string().required(),

                        })
                    )

            })

• javascript
• reactjs
• validation
• yup

3 Answers 3

The reason why of is not an exported member from yup is because yup needs to know the type of data first. You can only use of once you know the type.

For example: array().of(), string().oneOf(), e.t.c

Hence, in your case, you need to provide the data type and it will solve your problem.

const validationSchema = yup.object({     
             loan_register: yup.boolean(),
             loans: yup.array().when('loan_register', {
                          is: true,
                          then: yup.array().of(
                                  yup.object({
                                      bank_name: yup.string().required(),
                                      bank_reg_no:yup.string().required(),
                                      loan_amount:yup.string().required(),
                               }))
            })
        })

EDIT: 'When loan_register === true, bank_name, bank_reg_no and loan_amount must be strings and required fields.'

You can translate that requirement into code like following (include Yup conditional validation using .when() ):

    const validationSchema = yup.object().shape({        
         loan_register: yup.boolean(),
         loans: yup.array()
        .when('loan_register', {
            is: true,
            then: yup.of(
                yup.object().shape({
                    bank_name: yup.string().required(),
                    bank_reg_no: yup.string().required(),
                    loan_amount: yup.string().required(),
                })
             )
        })
    })

I think you'll want to utilize .when(). This allows exactly what you're looking for by providing conditional validation checks based off other attribute values.

It has a more explicit approach where you'd add

.when('loan_register', {is: true, then: /* yup schema */ })

I believe the change would look like

yup.object().shape({
    loan_register: yup.boolean(),
    loans: yup.array()
        .when('loan_register', {
            is: true,
            then: yup.of(
                yup.object().shape({
                    bank_name: yup.string().required(),
                    bank_reg_no: yup.string().required(),
                    loan_amount: yup.string().required(),
                })
            )
        })
})