React Yup schema

Question

I'm using Yup to validate an email field:

const Schema = Yup.object().shape({
email: Yup.string()
  .email("non valid email format")
  .required("Email required"),
  ...

During form submit, I check if the email domain is included in a list of forbidden domains, if yes, I display an error message in a popup:

const forbidDomains = domains;
const domain = data.email.split("@");
if(forbidDomains.Domains.includes(domain[1])) {
  this.setState({openPopup:true,statusMessage:"domain not allowed : " + domain[1]})
      this.setState({isSubmitting:false})
      return;
}

I would like to check the domain in the Yup schema, but I'm not sure if it's possible.

score 1 · Accepted Answer · answered Dec 18 '20 at 23:07

I think that what you are looking for is the .test() from Yup. Maybe something like this may work:

const schema = {
    email: Yup.string()
        .string()
        .email()
        .test('test-name', 'Validation failure message', 
            function(value) {
                // your logic to check the domain
         })
}

React Yup schema

1 Answers1