Validating visible fields conditionally using React TSX React-hook-forms Yup

user_14892360 0
Viewed 450

I am having difficulty understanding how I can write validation on conditionally displayed fields. What I mean: I have a form in which 2 checkboxes ('webmoney', 'bank_transfer') webmoney shows 3 input fields. And bank_transfer shows 2 more checkboxes payment_system_A and payment_system_B, which display, by condition, the fields related to each of them.

I only came up with this solution, but it doesn't work. I've been stumped for 2 days now. :(

const validationSchema = yup.object().shape({
id: yup.number().required(),
title: yup.string().required('Required field'),
is_default: yup.number().oneOf([0, 1]),
is_confirmed: yup.number().oneOf([1], t('Confirm that the payment details on this form are correct')),
method_fields: yup.object().when('id', (id, validationSchema) => {
  switch (paymentMethod[id]) {     <---- here i will get webmoney or bank_transfer
    case 'webmoney: {
      return yup.object().shape({
        webmoney_account_number: yup.string().required('Required field'),
        webmoney_purpose_of_payment: yup.string().required('Required field')
      });
    }

    case 'bank_transfer': {

// These fields must be validated if payment_method_a is selected
//
      return yup.object().shape({
        payments_name: yup.string().required('Required field'),
        payments_nickname: yup.string().required('Required field'),
        payments_address: yup.string().required('Required field'),
        payments_bank_account_number: yup.string().required('Required field'),
        payments_bank_routing_number: yup.number().required('Required field'),
        payments_bank_name: yup.string().required('Required field'),
//
// These fields must be validated if payment_method_b is selected
    

    international_transfers_name: yup.string().required('Required field'),
            international_transfers_address: yup.string().required('Required field'),
            international_transfers_account: yup.string().required('Required field'),
            international_transfers_bank: yup.string().required('Required field'),
            international_transfers_bank_address: yup.string().required('Required field'),
            international_transfers_swifts: yup.string().required('Required field'),
            international_transfers_etc: yup.string().required('Required field')
          });
        }
      }
    })
  });

I would be happy to give you more information, but I cannot for security reasons.

yup react-hook-form typescript reactjs javascript
1 Answers

I solved this problem, below I provide the structure.

const validationSchema = yup.object({
field_name: yup.number(),
field_name: yup.number(),
field_name: yup.string().required('Required field'),
checkbox1: yup.number().oneOf([0, 1]),
checkbox2: yup.number().oneOf([1], t('Some text')),
deep_object: yup
  .object()
  .when('condition_field1', {
    is: (value) => your_condition,
    then: yup.object({
      field_name: yup.string().required('Required field'),
      field_name: yup.string().required('Required field')
    })
  })
  .when('condition_field1', {
    is: (value) => your_condition,

    then: yup.object().when('condition_field2', {
      is: (value) => your_condition,
      then: yup.object({
        field_name: yup.string().required('Required field'),
        field_name: yup.string().required('Required field'),
        field_name: yup.string().required('Required field'),
        field_name: yup.string().required('Required field'),
        field_name: yup.string().required('Required field')
      }),

      otherwise: yup.object().when('condition_field2', {
        is: (value) => your_condition,
        then: yup.object({
          field_name: yup.string().required('Required field'),
          field_name: yup.string().required('Required field'),
          field_name: yup.string().required('Required field'),
          field_name: yup.string().required('Required field')
        })
      })
    })
  })

});

user_148923600
Related