CODEWITHSUNDEEP
javascriptreactjsvalidationyup
Faizan Ahmed
Faizan Ahmed

Reputation: 214

yup conditional validation of array

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(),

                        })
                    )

            })

Upvotes: 3

Views: 9013

Answers (3)

aman saraf
aman saraf

Reputation: 65

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(),
                               }))
            })
        })

Upvotes: 4

Ani
Ani

Reputation: 938

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(),
                })
             )
        })
    })

Upvotes: 1

Mike Rivet
Mike Rivet

Reputation: 106

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(),
                })
            )
        })
})

Upvotes: 0

Related Questions