Always False when value is undefined

[ptitdam2001]

I am using Yup-phone & Yup on a react project to validate data of formik forms, but my phone field is not mandatory and could have a value undefined.

Using yup phone, when my phone field is undefined, Yup always considers it as an error but it is wrong. Reading the code, we should consider that value could be undefined, so the test does not fail.

That is an example of phone implement you could consider :

Yup.addMethod(Yup.string, 'phone', function (countryCode?: string, strict = false, errorMessage = '') {
  const errMsg =
    typeof errorMessage === 'string' && errorMessage
      ? errorMessage
      : isValidCountryCode(countryCode)
      ? `\${path} must be a valid phone number for region ${countryCode}`
      : '${path} must be a valid phone number.'

  return this.test('phone', errMsg, (value?: string) => {
    let _countryCode = countryCode
    let _strict = strict
    if (!isValidCountryCode(countryCode)) {
      // if not valid countryCode, then set default country to India (IN)
      _countryCode = 'IN'
      _strict = false
    }

    try {
      if (value) {
        const phoneNumber = phoneUtil.parseAndKeepRawInput(value, countryCode)

        if (!phoneUtil.isPossibleNumber(phoneNumber)) {
          return false
        }

        const regionCodeFromPhoneNumber = phoneUtil.getRegionCodeForNumber(phoneNumber)

        /* check if the countryCode provided should be used as default country code or strictly followed */
        return _strict ? phoneUtil.isValidNumberForRegion(phoneNumber, _countryCode) : phoneUtil.isValidNumberForRegion(phoneNumber, regionCodeFromPhoneNumber)
      }
      return true
    } catch {
      return false
    }
  })
})

Here is an example of my usage:

export const userFormSchema = Yup.object().shape({
  lastname: Yup.string().required('error.fieldRequired'),
  firstname: Yup.string().required('error.fieldRequired'),
  email: Yup.string().email('error.invalidMail').required('error.fieldRequired'),
  mobile: Yup.string().phone('fr', undefined, 'error.invalidPhone').required('required'),
  office: Yup.string().phone('fr', undefined, 'error.invalidPhone').optional(),
})

Thanks to my previous proposal, I have no error when phone is not mandatory (ie undefined)

[jurandir-goncalves-duetto]

My team is facing the same issue

• We use yup.lazy associated with .phone as a workaround