How to Validate Company Email Addresses in HTML Forms with Regex Patterns

Introduction

As a developer, you may need to validate that an email address provided in an HTML form belongs to a company, not a personal email address like Gmail, Yahoo, or Hotmail. This can be done using regular expressions (regex) in JavaScript. In this blog post, I'll guide you through building a regex pattern for validating company email domains and using it in an HTML form.

Building a Regex Pattern for Company Emails

To validate that an email address belongs to a company, we need to match the domain of the email address against a list of known company domains. To do this, we'll create a regex pattern that matches the format of a company email address.

Here's an example regex pattern to match email addresses with a company domain:

const regexPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.(com|org|net|io|biz|edu)$/i;

This pattern matches email addresses that:

• Start with one or more alphanumeric characters, periods, underscores, percent signs, plus signs, or hyphens.

• Are followed by the "@" symbol.

• Have a domain name that consists of one or more alphanumeric characters, periods, or hyphens.

• End with a top-level domain name, such as .com, .org, .net, .io, .biz, or .edu.

Using Regex Patterns in HTML Forms: To use this regex pattern in an HTML form, we'll add an email input field and a validation message that appears if the email address is not a company email.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.(com|org|net|io|biz|edu)$" />
<span class="validation-message">Please enter a valid company email address.</span>

In this example, we've added the pattern attribute to the email input field and set its value to the regex pattern we created earlier. We've also added a validation message that appears if the email address doesn't match the pattern.

Tips and Best Practices

Here are some tips and best practices to keep in mind when building regex patterns for validating company email domains:

• Use a list of known company domains to create your regex pattern.

• Test your regex pattern with a variety of valid and invalid email addresses.

• Use the i flag to make your regex pattern case-insensitive.

• Use the required attribute on the email input field to ensure that the user enters a valid email address.

Add a validation message that appears if the email address doesn't match the regex pattern.

Conclusion

By using regular expressions to validate that an email address belongs to a company, you can ensure that your HTML forms are collecting accurate and useful information. With the regex pattern and HTML form code examples provided in this blog post, you can easily implement this validation in your own projects.