notRequired() with empty string causes validation to fail

[dan003400]

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()

[abhisekp]

@dan003400 Could you please look into the lib code and file a PR for this if possible?

Thank You 😃

[trycrmr]

@dan003400 I think this works as a workaround:

const schema = Yup.object().shape({
  phone: Yup.string().when("isPhoneBlank", {
    is: false,
    then: Yup.string().phone(),
    otherwise: Yup.string(),
  }),
});

Using .when() referencing a sibling boolean key/value pair let's you check if the phone string is blank, and only use yup-phone if it isn't.

On the off chance you're using Formik doing this quick check whenever validations happen seems to be working alright:

onChange={(e) => {
  if (values.phone && values.phone.length > 0) {
    setValues(
      { ...values, isPhoneBlank: false },
      false
    );
  } else {
    setValues(
      { ...values, isPhoneBlank: true },
      false
    );
  }
  handleChange(e);
}}

[KmaCoder]

Or actually a better workaround without creating additional values like 'isPhoneBlank' is to add new method to yup where we can conditionally validate different schemas if value is blank:

Yup.addMethod(Yup.string, 'validatePhone', function () {
  return this.test('test-phone', "This phone number doesn't seem to look valid", value => {
    if (value) return this.phone().isValidSync(value)
    return true
  })
})

Or simply use .test method in schema without adding new method:

Yup.string().test('test-phone', "This phone number doesn't seem to look valid", value => {
    if (value) return this.phone().isValidSync(value)
    return true
  })

[nightness]

Add this to the repo please

        // This is what .required() is for
        if (!value || ((typeof(value) == 'string') && value.length == 0)) return true

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

[abhisekp]

@nightness Would you like to file a PR with the given code?

[nightness]

@abhisekp Just did the PR.

[nightness]

@abhisekp corrected my PR errors.

[abhisekp]

Thanks for your PR @nightness

[JulienRst]

Hi folks, I really need this change for a project,
Can I be of any help to make this PR merged asap ?
(already looked at @nightness changes and it seems fine to me !)

[abhisekp]

@JulienRst Kindly, review #461 (comment)

[abhisekp]

Kindly, reach out to me in any of the platforms given below to volunteer for maintaining this repository.
https://about.me/abhisekp

[kferolinomersoft]

Or actually a better workaround without creating additional values like 'isPhoneBlank' is to add new method to yup where we can conditionally validate different schemas if value is blank:

Yup.addMethod(Yup.string, 'validatePhone', function () {
  return this.test('test-phone', "This phone number doesn't seem to look valid", value => {
    if (value) return this.phone().isValidSync(value)
    return true
  })
})

Or simply use .test method in schema without adding new method:

Yup.string().test('test-phone', "This phone number doesn't seem to look valid", value => {
    if (value) return this.phone().isValidSync(value)
    return true
  })

To add here from @KmaCoder

const phoneSchema = yup.string().phone('US', true);

const validationSchema = yup.object({
   ...otherValidations,
   phone: yup.string().test('test-phone', 'Invalid format', (value) => {
      if (value) return phoneSchema.isValidSync(value);
      return true;
  }),
});

[ptitdam2001]

Clone #718

[rksainath]

To avoid empty field validation try the below solution.

const schema = Yup.object().shape({
 phone: Yup.string().when('phone', {
        is: (value) => value?.length > 0,
        then: Yup.string().phone(),
        otherwise: Yup.string(),
      }),
 },[['phone', 'phone']]);

The reason for duplicating the dependencies is to avoid cyclic dependency errors. Check this StackOverflow discussion for more details.

[codenameberyl]

This was how I fixed empty field validation.

const [phone, setPhone] = useState()

function validatePhone() {
        if (phone) {
            return yup.string().phone(null, true, "Invalid Phone Number")
        } else {
            return yup.string().ensure()
        }
}

const validationSchema = yup.object({
   ...otherValidations,
   phone: validatePhone(),
})

<PhoneInputWithCountry
      className="form-control"
      defaultCountry="US"
      name="phone"
      id="phone"
      value={phone}
      onChange={setPhone}
      control={control}
  />

According to yup string.ensure() documentation

string.ensure(): Schema
Transforms undefined and null values to an empty string along with setting the default to an empty string.

I hope this works for someone. All thanks to @abhisekp. Happy coding.