Form Validation using Yup to check whether inputs value is equal or not

Question

I need to make a form validation using Yup to check input type email1, email2, email3, email4 and email5 in my React App.

The rule of thumb is easy. Check those emails is in valid form and cannot have similar emails values.

I am super new to Yup. So what I did is:

const message = 'Duplicate emails not allowed';
const incorrect = 'Incorrect email format';

const Schema = Yup.object().shape({
  email1: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email3'), null], message)
    .oneOf([Yup.ref('email4'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email2: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email3'), null], message) 
    .oneOf([Yup.ref('email4'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email3: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email4'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email4: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email3'), null], message)
    .oneOf([Yup.ref('email5'), null], message),
  email5: Yup.string()
    .email(incorrect)
    .oneOf([Yup.ref('email1'), null], message)
    .oneOf([Yup.ref('email2'), null], message)
    .oneOf([Yup.ref('email3'), null], message)
    .oneOf([Yup.ref('email4'), null], message)
});

The issue with this method is, it will also detect an error of duplicate emails even the input text is empty. How do I fix this? Is there any better way that I could implement?

Thanks

Answer 1

use notOneOf instead of oneOf

you must use in this structure

---

const ValidationSchema=Yup.object().shape({email1: Yup.string().email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email2'),
      Yup.ref('email3'),
      Yup.ref('email4'),
      Yup.ref('email5')
    ],
    this.message
  ),

email2: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email3'),
      Yup.ref('email4'),
      Yup.ref('email5')
    ],
    this.message
  ),
email3: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email2'),
      Yup.ref('email4'),
      Yup.ref('email5')
    ],
    this.message
  ),

email4: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email2'),
      Yup.ref('email3'),
      Yup.ref('email5')
    ],
    this.message
  ),
email5: Yup.string()
  .email(this.incorrect)
  .notOneOf(
    [
      Yup.ref('email1'),
      Yup.ref('email2'),
      Yup.ref('email3'),
      Yup.ref('email4')
    ],
    this.message
  )});