Yup: Single Field with multiple Conditions

Created on 22 May 2019  路  3Comments  路  Source: jquense/yup

I field which has to validate either for Email and Phone Number.
I tried many possible methods, all the time if Phone number gets valid, email gets invalid throws error or vice versa.
My requirement would be, if any one type ( email || phonenumber) gets valid, the field is valid.

I see people suggesting to use Transform, but i'm not finding a way to implement an OR condition in it.
Please suggest some good approach.

Thanks in advance.

Most helpful comment

Resolved the problem using the below code,

const validationSchema = Yup.object({
  customerName: Yup.string("Enter a name")
  .required("Name is required"),
  customerEmailPhone: Yup.string("Enter your Email/Phone Number")
                          // .email("Enter a valid email")
                          .required("Email/Phone Number is required")
                          .test('test-name', 'Enter Valid Phone/Email', 
                            function(value) {
                              const emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                              const phoneRegex = /^(\+91-|\+91|0)?\d{10}$/; // Change this regex based on requirement
                              let isValidEmail = emailRegex.test(value);
                              let isValidPhone = phoneRegex.test(value);
                              if (!isValidEmail && !isValidPhone ){
                                return false;
                              }
                              return true;
                            })
});

All 3 comments

The question is a bit too abstract here, what are you trying to validate that depends on email and phonenumber? Are you trying to create a field that requires that one of them? There isn't really a good way to do something to say only one field must be valid without a custom test on the parent schema

Please find the validation method i've written to handle a single Text field to validate either Email/Phone number,

const validateEmailPhone = (value) => {
const emailRegex = /^([a-zA-Z0-9_.-])+\@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

const phoneRegex = /^(\+91-|\+91|0)?\d{10}$/; 
let isValidEmail = emailRegex.test(value);
let isValidPhone = phoneRegex.test(value);

if (!isValidEmail && !isValidPhone ){
  return false;
}
if(isValidEmail ){

  return 'emailAddress';
}
if(isValidPhone)
  return 'number';

};

It checks whether the value entered is a valid Email or Valid Phone or Invalid Value
How to achieve the same using Yup Library.

Resolved the problem using the below code,

const validationSchema = Yup.object({
  customerName: Yup.string("Enter a name")
  .required("Name is required"),
  customerEmailPhone: Yup.string("Enter your Email/Phone Number")
                          // .email("Enter a valid email")
                          .required("Email/Phone Number is required")
                          .test('test-name', 'Enter Valid Phone/Email', 
                            function(value) {
                              const emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                              const phoneRegex = /^(\+91-|\+91|0)?\d{10}$/; // Change this regex based on requirement
                              let isValidEmail = emailRegex.test(value);
                              let isValidPhone = phoneRegex.test(value);
                              if (!isValidEmail && !isValidPhone ){
                                return false;
                              }
                              return true;
                            })
});
Was this page helpful?
0 / 5 - 0 ratings