使用 React TSX React-hook-forms 有条件地验证可见字段是的

Question

我很难理解如何在有条件显示的字段上编写验证。我的意思是：我有一个表单，其中 2 个复选框（'webmoney'、'bank_transfer'）webmoney 显示 3 个输入字段。 bank_transfer 显示另外 2 个复选框 payment_system_A 和 payment_system_B，它们按条件显示与每个复选框相关的字段。

我只是想到了这个解决方案，但它不起作用。我已经难过了2天了。 :(

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')
          });
        }
      }
    })
  });

我很乐意为您提供更多信息，但出于安全原因我不能。

Answer 1

我解决了这个问题，下面我提供结构。

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')
        })
      })
    })
  })

});

使用 React TSX React-hook-forms 有条件地验证可见字段是的

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

javascript

typescript

reactjs

yup

react-hook-form

使用 React TSX React-hook-forms 有条件地验证可见字段 是的

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

javascript

typescript

reactjs

yup

react-hook-form

使用 React TSX React-hook-forms 有条件地验证可见字段是的