Yup依赖验证异常求助：includes未定义及表单验证失效

问题描述 #

• 未选中member_type下拉框时提交表单，所有必填字段（含member_type）均不触发验证错误
• 未选中member_type但输入其他字段时，控制台抛出Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')，所有依赖member_type.includes的字段会依次报错

修复方案 #

修复后的完整验证代码 #

// Yup field validation
const validationSchema = Yup.object().shape({
  member_type: Yup.string().required('*Member type is required'),

  forename: Yup.string()
    .required('*Forename is required')
    .max(35, 'Forename can be a maximum of 35 characters'),

  surname: Yup.string()
    .required('*Surname is required')
    .max(35, 'Surname can be a maximum of 35 characters'),

  dementia: Yup.string().when(['member_type'], {
    is: (member_type) => member_type?.includes('Standard Member'),
    then: Yup.string().required('*Dementia information is required'),
  }),

  carer_relationship: Yup.string().when(['member_type'], {
    is: (member_type) => member_type?.includes('Carer'),
    then: Yup.string().required('*Carer relationship is required'),
  }),

  cared_for_name: Yup.string()
    .when(['member_type'], {
      is: (member_type) => member_type?.includes('Carer'),
      then: Yup.string().required('*Cared for name is required'),
    })
    .max(35, 'Cared For Name can be a maximum of 35 characters'),

  cared_for_medical_conditions: Yup.string().when(['member_type'], {
    is: (member_type) => member_type?.includes('Carer'),
    then: Yup.string().required(
      '*Cared for medical condition details are required'
    ),
  }),

  poa_held: Yup.string().when(['member_type'], {
    is: (member_type) => member_type?.includes('Carer'),
    then: Yup.string().required('*POA held is a required field'),
  }),

  poa_link: Yup.string().when(['poa_held'], {
    is: (poa_held) => poa_held === 'Yes',
    then: Yup.string().required(
      '*A link to a photo of the front page of the POA form required'
    ),
  }),
});

关键修复点说明 #

1. 补全语法错误：原代码中cared_for_medical_conditions的验证块缺少闭合的}，导致整个Yup schema结构解析失败，这是所有验证失效的核心原因。
2. 防止空值调用方法：给所有依赖member_type的is判断添加可选链操作符?.，避免member_type为undefined时调用includes方法抛出类型错误。
3. 确保验证流程正常执行：修复语法错误后，member_type的必填验证会优先触发，当未选中该下拉框时，会直接抛出member_type的必填错误，同时避免后续验证因为空值报错而中断。

内容的提问来源于stack exchange，提问作者Jess