How to add work email validation to your form using JS

You can enhance your forms by adding custom email validation using JavaScript. This ensures that users provide valid email addresses and helps filter out personal email domains like Gmail, Yahoo, etc. This approach is beneficial for focusing on business-related communications. Follow the steps below to implement custom email validation for your form:

Step-by-Step Guide

• Open Your Form:
  • Go to the form you want to add email validation to.
• Navigate to the Code Section:
  • On the left side of the form builder page, find and click on the "Code" option. This will open the Form Events page.

• Access Form Event Handlers:
  • On the Form Events page, you’ll see options to listen for form events and add custom handlers. To learn more about what you can do with custom event handlers, refer to our documentation on event handlers.
• Add an Event Handler:
  • Click on the "Add event handler" button. This will allow you to select the type of event handler you want to add.

• Select onPageSubmitted Event Handler:
  • From the available options, choose onPageSubmitted. This event handler lets you enter JavaScript code to validate the form data before submission.

• Enter the Email Validation Code:
  • In the onPageSubmitted field, enter the following JavaScript code to validate email addresses and exclude certain domains:

function onPageSubmitted(context) {
const isValidEmail = (value) => {
const regexPattern = /@([A-Za-z0-9-]+\.[A-Za-z0-9-.]+)/;
const match = value.match(regexPattern);
const excludeEmails = ['gmail', 'yahoo', 'hotmail', 'aol', 'me', 'icloud', 'comcast', 'msn', 'att', 'ios', 'outlook', 'inbox', 'mail', 'hotmail', 'live', 'verizon', 'bellsouth', 'charter', 'earthlink', 'mac', 'cox', 'email', 'cloudassociates', 'ril', 'work', 'w', 'gmai', 'ail', 'suddenlink', 'ymail', 'asdasd', 'abc', 'ya', 'yah', 'ccb', 'aa', 'aim', 'test'];

const domain = match && match.length > 1 && match[1].split('.')[0];

return (match && match.length > 1 && domain && !excludeEmails.includes(domain));
};

const emailInputId = 'cff3a276-a82f-4e1b-a553-3c5e3638acb2'; 
if (context.answers[emailInputId] && !isValidEmail(context.answers[emailInputId])) {
return {
type: 'error',
errors: {
[emailInputId]: 'Please enter a valid work email.'
},
}
}
}

• emailFieldId: Replace this with the actual ID of your email field.  To find the email field ID:

1. Go back to the form builder page.
2. Locate the email field you want to validate.
3. Click on the gear icon next to the email field.
4. In the dropdown menu that appears, scroll down and select “Copy ID.”
5. Then, return to the code page and replace emailFieldId with the ID you copied from the form builder.

• excludeEmails: You can customize the email addresses that will get excluded as you like. 

How the form functions after the JS is added:

What This Code Does:

• Checks the Email Domain: The code looks at the email address entered and checks if it's from a domain we want to exclude (like Gmail or Yahoo).
• Shows an Error Message: If the email address is from one of these excluded domains, it will prevent the form from being submitted and show an error message asking the user to try a different email address.

Save Your Changes:

• Click on "Save" to apply the custom email validation code.

Preview Your Form:

• After saving, preview the form to ensure that the email validation works as expected. Test the form by submitting emails from both included and excluded domains to verify the validation logic.

In this guide, we’ve covered how to use JavaScript to add custom email validation to your form. By following these steps, you can ensure that users are prevented from submitting forms with email addresses from personal domains like Gmail, Yahoo, etc. This helps maintain data quality and relevance.

If you're experiencing issues or have questions, please contact us at [email protected]. We're here to assist you!