Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Checking fields value based on value of another field using Yup and Formik

I’m trying to use yup to check if the field industryNameOther is not left empty but I want to perform this check only if field industryName, which is an array of strings, includes a string ‘other’.

What am I doing wrong?

import * as Yup from 'yup';

const validationSchema = Yup.object({
  sales: Yup.object({
    contactPerson: Yup.string().required('helperText.sales.contactPerson.required'),
  }),
  customer: Yup.object({
    name: Yup.string().required('helperText.customer.name.required'),
    sapNumber: Yup.string()
      .matches(/^4d{7}$/, 'helperText.customer.sapNumber.format')
      .notRequired(),
    address: Yup.string().required('helperText.customer.address.required'),
    contactPersonMail: Yup.string()
      .email('helperText.customer.contactPersonMail.format')
      .notRequired(),
    industryName: Yup.array().min(1, 'helperText.customer.industryName.number'),
    industryNameOther: Yup.string().when(['industryName'], {
      is: (industryName) => industryName && industryName.includes('other'),
      then: Yup.string().required('helperText.customer.industryNameOther.required'),
    }),
    relations: Yup.number().required('helperText.customer.relations.number').min(0, 'helperText.customer.relations.number')
  }),
  project: Yup.object({
    supplyChainParts: Yup.array().required('helperText.project.supplyChainParts.number').min(1, 'helperText.project.supplyChainParts.number'),
    investmentLocation: Yup.string().required('helperText.project.investmentLocation.required'),
    investmentType: Yup.string().required('helperText.project.investmentType.required')

  })
})

export default validationSchema

I tried this code below but it is not working.

industryNameOther: Yup.string().when(['industryName'], {
      is: (industryName) => industryName && industryName.includes('other'),
      then: Yup.string().required('helperText.customer.industryNameOther.required'),
    }),
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. The „then” part was not right.

    industryNameOther: Yup.string()
      .when('industryName', {
        is: (industryName: string) => industryName && industryName.includes('other'),
        then: (schema) => schema.required('helperText.customer.industryNameOther.required'),
      }),

  2. 0

    Please try this.

    industryNameOther: Yup.string().when('industryName', {
      is: (industryName) => industryName && industryName.includes('other'),
      then: Yup.string().required('helperText.customer.industryNameOther.required'),
    }),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search