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.
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;
})
});
Most helpful comment
Resolved the problem using the below code,