Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Always False when value is undefined #718

Open
ptitdam2001 opened this issue May 12, 2022 · 1 comment
Open

Always False when value is undefined #718

ptitdam2001 opened this issue May 12, 2022 · 1 comment

Comments

@ptitdam2001
Copy link

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
Copy link

jurandir-goncalves-duetto commented Jan 13, 2023

My team is facing the same issue

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants