yup conditional validation of array

Question

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

                        })
                    )

            })

Dharman · Accepted Answer · 2021-09-21 10:20:39Z

4

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

edited Sep 21, 2021 at 10:20

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 21, 2021 at 10:15

aman saraf

659 bronze badges

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

Comments

Ani · Accepted Answer · 2021-06-07 14:26:07Z

1

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

edited Jun 7, 2021 at 14:26

answered Jun 7, 2021 at 13:56

Ani

9783 gold badges12 silver badges24 bronze badges

7 Comments

Matt U Over a year ago

It's much more helpful if you explain a bit about what you did with the code, and why.

Ani Over a year ago

The code explains itself. when("loan_register") is true, bank_name, bank_reg_no and loan_amount must be validated as strings and must be required. I just added one more condition in comparison to the original question. You don't have to vote down my answer only because of this. I'm trying to help!

Matt U Over a year ago

"While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion." -- I also didn't intend to downvote, that was a mistake on my part. If you edit your answer to include a short explanation, I think that will clear the downvote (or will allow me to clear it).

Faizan Ahmed Over a year ago

@Ani Attempted import error: 'of' is not exported from 'yup' (imported as 'yup'). this error is appearing with the method you provided my import statement is ` import * as yup from 'yup'`

Ani Over a year ago

@FaizanAhmed, have you added these imports? import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; Also, could you please tell me the version of react-hook-form and @hookform/resolvers ?

|

Mike Rivet · Accepted Answer · 2021-06-07 14:14:42Z

0

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

answered Jun 7, 2021 at 14:14

Mike Rivet

1064 bronze badges

1 Comment

Faizan Ahmed Over a year ago

Attempted import error: 'of' is not exported from 'yup' (imported as 'yup'). this error is appearing with the method you provided my import statement is ` import * as yup from 'yup'`

Collectives™ on Stack Overflow

yup conditional validation of array

3 Answers 3

Comments

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related