Untitled

import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  emailOrPhone: Yup.string()
    .test('valid-email-or-phone', 'Invalid email or phone number', (value) => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      const phoneRegex = /^\d{10}$/; // assuming phone numbers are 10 digits long
      
      return emailRegex.test(value) || phoneRegex.test(value);
    })
    .required('Email or phone number is required'),
});

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      emailOrPhone: '',
    },
    validationSchema,
    onSubmit: (values) => {
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="emailOrPhone">Email or Phone Number</label>
      <input
        type="text"
        id="emailOrPhone"
        name="emailOrPhone"
        value={formik.values.emailOrPhone}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {formik.touched.emailOrPhone && formik.errors.emailOrPhone ? (
        <div>{formik.errors.emailOrPhone}</div>
      ) : null}
      <button type="submit">Submit</button>
    </form>
  );
};