abhisekp / yup-phone Goto Github PK

The devDependency husky was updated from 2.5.0 to 2.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

husky is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

There is no way to make a field optional but validate when not an empty string.

Yup.string().phone(true, false, 'Phone not valid').notRequired()

Describe the bug
yup-phone is not working with this current version

getting: TypeError: yup__WEBPACK_IMPORTED_MODULE_5__.string(...).phone is not a function

To Reproduce
Try to validate phone number with yup-phone

const validate = Yup.object({
phone: Yup.string()
.phone("IN")
.required('Enter your valid mobile number.'),
})

NOTE: if you do not provide a runnable reproduction the chances of getting feedback are significantly lower

Expected behavior
Should validate the phone input field

Platform (please complete the following information):

Browser [All]
Version [latest]
Additional context

"next": "13.4.9",
"react": "18.2.0",
"react-dom": "18.2.0",
"formik": "^2.4.2",
"yup": "^1.2.0",
"yup-phone": "^1.3.2"

The devDependency rollup was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hey there!

Thanks for making this!

I'm calling this library with the following.

.phone(undefined, false, "A valid phone number is required")

This code is valid, because the type signature is as follows https://github.com/abhisekp/yup-phone/blob/master/src/yup-phone.ts#L16 - the first parameter is not required.

However, the library defaults to India in this case running the following:

const phoneNumber = phoneUtil.parseAndKeepRawInput(value, 'IN');

When we do the following:

const regionCodeFromPhoneNumber = phoneUtil.getRegionCodeForNumber(
    phoneNumber
);

Therefore we always get IN back in this situation, because the phone number of an unknown validity has been parsed as belonging to this region.

If the intended behaviour is that when we are not in strict mode, then the phone number's region is derived from the phone number itself then validated, then it will always be validated with the region specified or India.

So it is never really a "unstrict" test for any valid global phone number. It always needs a region.

Google's guide suggests that isValidNumberForRegion should be used sparing https://github.com/google/libphonenumber/blob/master/FAQ.md#when-should-i-use-isvalidnumberforregion

Maybe when we aren't in strict mode then isValidNumber() could be used?

Maybe I am missing something here?

In a PHP version of this library, one can pass empty strings or null when the region is unknown when parsing.

giggsey/libphonenumber-for-php#85

This however is not valid code:

const phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance();

const value = '202-456-1414';
const phoneNumber = phoneUtil.parse(value);

In the other Javascript library port of libphonenumber, this is valid code:

const parsePhoneNumber = require('libphonenumber-js');

const phoneNumber = parsePhoneNumber('+1 202-456-1414');

phoneNumber.isValid();

Hope this isn't confusing!

How to make a custom error message ?

I tried something like this :

phoneNumber: Yup.string().phone(errorMessage="Please enter a valid phone number, include the country and area codes."),

But it does not work.

The devDependency @types/jest was updated from 24.0.16 to 24.0.17.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

First of all thanks for creating this!

I guess this is more of a question than an issue, although the answer will indicate whether it's a bug or not.

My understanding would be if you tried to validate a number with a specific locale using a different country code, that it would return false.

e.g. given
const phoneSchemaDE = yup.string().phone('DE');

I would expect the following to return false, as the country code is not DE:
phoneSchemaDE.isValidSync('+919876543210');
but it doesn't, it returns true.

So my ultimate quesiton is,
is the locale check:
"is this number a valid phone number when calling FROM this country?"
or
"is this number a valid number FOR this country?"

Add tests for all the phone numbers in the country list Country List

Whilst this project is amazing and should be included out of the box as a Yup rule, I can't help but notice the huge bundle size, see:

Could you please consider refactoring and improving the code so that it gets reflected in the bundle size? 🙏

Use semantic release to release to npm

Sandbox not found
yup phone is not working on codesandbox

When using this package, we are getting an odd typescript error after transpilation. tsc completes successfully, but the "output" .d.ts files this error:

Namespace "yup" has no exported member 'default' in output

I believe this might have something to do with this package importing an old version of "@types/yup": "^0.29.13",. It seems like the most recent version of yup is actually written in typescript (or at least provides it's own types), so this shouldn't be necessary.

Hi,

Unable to add it,

yarn add yup-phone
yarn add v1.22.4
warning ..\package.json: No license field
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/yup-phone: Not found".

Yup is now at v0.31.0. It would be nice if this matched that version.

Here is a snippet from my yup validation schema. I would like to pass a message into the required function to display something user-friendly if they don't enter any text.

emergencyPhoneNumber: Yup.string()
  .phone()
  .required('Emergency contact phone number is required.'),

I know I can provide a custom error message through phone() however, as this is an add-on to yup, it should support yup's expected behavior. If possible, I would like to be able to provide an error message for when a user input's an invalid phone number and a required message if they don't input anything.

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)

Did not expect alphabets & special characters should be valid for Germany phone number.

yup.string().phone('DE', false, 'it's wrong').isValidSync('619490ac8@')

(also tested the underlying google-libphonenumber, consistent results... so I assume it's not our fault on this side 🥲)

(p.s. would be nice if the doc could forward us to somewhere to find the list of supported countryCodes)

Hi,

Today I updated yup-phone to last version. Then one of my validators stops working and I got the following error:

C:\Users\User\Documents\Momento\development\Wallet\apis\transactions\src\validators\createUserValidators.js:42
const phoneSchema = (0, _yup.string)().phone('US', true).required();
                                       ^

TypeError: (0 , _yup.string)(...).phone is not a function
    at Object.<anonymous> (C:\Users\User\Documents\Momento\development\Wallet\apis\transactions\src\validators\/createUserValidators.js:37:37)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Module._compile (C:\Users\User\Documents\Momento\development\Wallet\apis\transactions\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Object.newLoader [as .js] (C:\Users\User\Documents\Momento\development\Wallet\apis\transactions\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\Users\User\Documents\Momento\development\Wallet\apis\transactions\src\resolvers\users\/CreateUser.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Module._compile (C:\Users\User\Documents\Momento\development\Wallet\apis\transactions\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Object.newLoader [as .js] (C:\Users\User\Documents\Momento\development\Wallet\apis\transactions\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
[nodemon] app crashed - waiting for file changes before starting...

I went back to version 1.2.12 and the issue went away.

Hope you can help me. Regards!

Leonel

Hello,

Thanks a lot for this tool, it seems very useful.

I am new to Yup and I am using it for the first time together with Formik.

I would like to customize the error message that is displayed in my form when an incorrect phone number is entered.

At the moment it says: "[...input] must be a valid phone number."

I am using it like this:
Yup.string().phone().required()

When i hover over required() I get required(message?: Yup.TestOptionsMessage<{}, any>): Yup.StringSchema<string>

I would very much like to add a message to the phone also but here i get: phone(countryCode?: string, strict?: boolean): Yup.StringSchema<string>

I am not familiar with TypeScript yet so I don't think I will give a PR a go, but is this something you could implement?

It would be nice if you could accept an array of regions

I get the following TypeScript error. It appears that the types in this repo overwrite the @types/yup ones

import * as Yup from 'yup';
import '@abhisekp/yup-phone';

export default Yup.object().shape({
  emailAddress: Yup.string()
    .email('Email is not a valid email address')
    .required('Email is required'),
});

The phone number 2819129531 is being flagged as invalid.

This is a correct number.

201 is a valid area code for US. https://www.allareacodes.com/201
The library is not accepting numbers starting with 201.

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.5.5 to 7.6.0.

• The devDependency @babel/preset-env was updated from 7.5.5 to 7.6.0.
• The devDependency @babel/preset-typescript was updated from 7.3.3 to 7.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.5.5 to 7.6.0.

• The devDependency @babel/preset-env was updated from 7.5.5 to 7.6.0.
• The devDependency @babel/preset-typescript was updated from 7.3.3 to 7.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The dependency google-libphonenumber was updated from 3.2.4 to 3.2.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

google-libphonenumber is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Hello,
since updateing to yup 1.0.0 I get the following error message

 ERROR(vue-tsc)  Property 'phone' does not exist on type 'StringSchema<string | undefined, AnyObject, undefined, "">'.
 FILE  /Users/mariojacobi/Repositories/sofi-landing-page/pages/group/[id].vue:194:40

    192 |     vibe: yup.string().required(),
    193 |     phoneNumber: yup.string().test('test-phone', "This phone number doesn't seem to look valid", (value) => {
  > 194 |       if (value) { return yup.string().phone().isValidSync(value) }
        |                                        ^^^^^
    195 |       return true
    196 |     })
    197 |   })

Does anybody have a solution yet?

• yup: 0.32.9
• yup-phone: 1.2.19

Given some yup schema, I expect these validations (codesandbox tests)

1. invalid

{ email: '[email protected]', phone: '1' } // valid email, invalid phone

2. invalid

{ email: 'a', phone: '08012341234' } // invalid email, valid phone (japan)

3. validate

{ email: '', phone: '08012341234' } // empty email, valid phone (japan)

4. validate

{ email: '[email protected]', phone: '' } // valid email, empty phone

5. validate

{ email: '[email protected]', phone: '08012341234' } // valid email, valid phone (japan)

I've tried these test cases with two different schemas

1

yup.object().shape(
  {
    email: yup
      .string()
      .email()
      .when("phone", {
        is: (val) => !val || val.length < 1,
        then: yup.string().email().required(),
        otherwise: yup.string().email()
      }),
    phone: yup
      .string()
      .phone()
      .when("email", {
        is: (val) => !val || val.length < 1,
        then: yup.string().phone().required(),
        otherwise: yup.string()
      })
  },
  [["email", "phone"]]
);

2

yup.object().shape(
  {
    email: yup
      .string()
      .email()
      .when("phone", {
        is: (val) => !val || val.length < 1,
        then: yup.string().email().required(),
        otherwise: yup.string().email()
      }),
-   phone: yup.string().phone().when("email", {
+   phone: yup.string().when("email", {
      is: (val) => !val || val.length < 1,
      then: yup.string().phone().required(),
      otherwise: yup.string()
    })
  },
  [["email", "phone"]]
);

I'm struggling to get all the tests to pass. What is the correct schema to use so that

• valid email + invalid phone = invalidation
• invalid email + valid phone = invalidation
• empty email + valid phone = validation
• valid email + empty phone = validation
• valid email + valid phone = validation

related to jquense/yup#79 (comment)

Running npm install yup-phone results in a 404

In registration page, I'm using:

import * as Yup from "yup";
import "yup-phone";

Then setting RegistrationSchema as follows:

const RegistrationSchema = Yup.object().shape({
    first_name: Yup.string()
      .required(),
    last_name: Yup.string()
      .required(),
    email: Yup.string()
      .email("Wrong email format")
      .required(),
    phone: Yup.string()
      .phone()
      .required()
  });

But getting this error:

TypeError: yup__WEBPACK_IMPORTED_MODULE_4__.string(...).phone is not a function

I'm working on a new admin theme and fairly new to this. Kindly advice.

Thanks

EDIT: Nevermind, the new version 1.2.4 resolved it 👍

@abhisekp Are you able to release this package to NPM so we can use it? :) Thanks for the cool package.

import * as Yup from "yup";
import "yup-phone";

declare module "yup" {
export interface StringSchema {
phone(countryCode?: string, strict?: boolean): StringSchema;
}
}

After using above code still getting that error.
Versions:
"yup": "^0.32.8",
"yup-phone": "^1.2.19"