Validate list of emails

[Gregoirevda]

How to validate a list of emails like a@a.com;b@b.com

I tried to convert the string to an array and validate each email like this, but it's difficult to mix strings and arrays:
yup.array().transform((str) => str.split(';')).of(yup.string().email()).required()

[jquense]

what's wrong with your example? Does it not work?

[Gregoirevda]

It is applied on a text input containing: a@a.com;b@b.com. Since that is a String and not an Array, the transform receives a null

[Gregoirevda]

The original value actually has this data, so this works without the required
yup.array().transform((str) => str.split(';')).of(yup.string().email()).required()

With required, I'm getting Cannot read property 'length' of undefined probably because it's reading the value and not originalValue

[jquense]

probably because it's reading the value and not originalValue

O right, yes you should use originalValue here, since value will be null or empty b/c the built in array parsing will have failed

[mmlumba]

I'm getting a similar issue where my initial value starts off as an array, but as soon as I type something the entire value becomes a string and no string validations are performed

[brentertz]

I had to do this recently and ended up with the following. Maybe it'll help someone else?

const isEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); // or use your own
const EmailFormValidationSchema = object().shape({
  body: string().required(),
  recipient: string()
    .transform((value) => Array.from(new Set(value.split(';'))).join(';')) // dedupe - optional step
    .required()
    .test(
      'emails',
      'Invalid email address',
      (value) => value && value.split(';').every(isEmail)
    ),
  subject: string().required(),
});

[rscotten]

This solution transforms a comma delimited string into an array of emails and then performs email validation on each one.

const validationSchema = Yup.object().shape({
  email: Yup.array()
    .transform(function(value, originalValue) {
      if (this.isType(value) && value !== null) {
        return value;
      }
      return originalValue ? originalValue.split(/[\s,]+/) : [];
    })
    .of(Yup.string().email(({ value }) => `${value} is not a valid email`)),
});

[mickrip]

If this is useful to anybody:

const isEmailSchema = Yup.string().email();
const schema = Yup.object().shape({
  "email-list": yup
    .string()
    .required("This field cannot be empty")
    .test({
      name: "emails",
      test: function(value) {
        const firstInvalidEmail = value
          .split(",")
          .map(email => email.trim())
          .filter(v => !isEmpty(v))
          .find(v => !isEmailSchema.isValidSync(v));

        return !firstInvalidEmail
          ? true
          : this.createError({
              message: `The email address '${firstInvalidEmail}' is invalid.`
            });
      }
    })
});

[thirumalaicb]

This solution transforms a comma delimited string into an array of emails and then performs email validation on each one.

const validationSchema = Yup.object().shape({
  email: Yup.array()
    .transform(function(value, originalValue) {
      if (this.isType(value) && value !== null) {
        return value;
      }
      return originalValue ? originalValue.split(/[\s,]+/) : [];
    })
    .of(Yup.string().email(({ value }) => `${value} is not a valid email`)),
});

This is good. Thank you. But, this throws an error during edit. If the actual text in the input field is a@ex.com, b@ex.com, c@ex.com, the comma-separated value returned after the condition check will be a whole string in the array as ["a@ex.com, b@ex.com, c@ex.com"], and is invalid. Instead of returning the value as is, we have to split the value and apply a flatMap as return value.flatMap((emails) => emails.split(/[\s,]+/));.

[plashenkov]

Hi @thirumalaicb

It looks like in your example some previous method transforms the a@ex.com, b@ex.com, c@ex.com into the array ["a@ex.com, b@ex.com, c@ex.com"].

yup.array() doesn't do this, as far as I know.

Is it correct?

[thirumalaicb]

Hi @plashenkov,

I am using a Formik form to populate the input field to edit. A blank form with the input field getting populated for the first time do not have this issue. But, during edit, the pre-populated value does not split.

[plashenkov]

I've added our validation code to a Formik form here: https://codesandbox.io/s/cool-beaver-h16j2
And it looks like it works good. Maybe I am missing something.