CODEWITHSUNDEEP
javascriptreactjsvalidationyup
Arif Mustaffa
Arif Mustaffa

Reputation: 163

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

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

Upvotes: 15

Views: 26581

Answers (1)

Alexfrostwolf
Alexfrostwolf

Reputation: 450

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
  )});

Upvotes: 12

Related Questions