Email validation is an important aspect of any web application. It ensures that the user's input is in the correct format and meets the requirements set by the application. The process of email validation is crucial for maintaining the security of the application, as well as providing a better user experience.

In this post, I will show you how two ways of implementing email validation on the frntend. The first example includes the use of regular expressions (RegEx) and JavaScript and the second one is just with HTML & Javascript -> for those of you that feel more comfortable not including Regex. The code snippets provided are ready to copy and can be easily integrated into your web application.

Email Validation with RegEx and vanilla JavaScript

The use of regular expressions in email validation has been around for a long time, and it is still widely used today. While RegEx can be a bit intimidating for those who are not familiar with it, it provides a powerful tool for validating emails and ensuring that the user's input is in the correct format.

To validate an email address, you can use the following code snippet:

<form>
  <label for="email">Email:</label>
  <input type="email" id="emailInput">
  <button type="submit" id="submitBtn">Submit</button>
</form>

const emailInput = document.getElementById("emailInput");
const submitBtn = document.getElementById("submitBtn");

function isValidEmail(email) {
  const re =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\. [0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

emailInput.addEventListener("input", function() {
  submitBtn.disabled = !isValidEmail(emailInput.value);
});

Email validation with regex is a commonly used pattern for validating emails, however, there is no single, foolproof way to validate email addresses with JavaScript (or any programming language). The regular expression used in the code is a good starting point, but it may not cover every possible edge case or new email address format that may arise.

Email Validation with HTML and vanilla JavaScript

An alternative approach to validate an email address could be to use the HTML5 type="email" attribute on an input element and then check if the input is valid using the checkValidity() method. This method leverages the browser's built-in email validation, which is more comprehensive and constantly updated. However, it's important to note that this method only works in modern browsers and is not supported in older ones.

Here's an example of using the type="email" attribute in an HTML form and checking if the input is valid using JavaScript and disabling the submit button if the email is not valid:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <button type="submit" id="submitButton">Submit</button>
</form>

const form = document.querySelector('form');
const emailInput = document.querySelector('input[type="email"]');
const submitButton = document.querySelector('#submitButton');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  if (emailInput.checkValidity()) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
});

In this example, the submit button is represented by the submitButton variable. When the form is submitted, if the email input's value is a valid email address, the submitButton.disabled property is set to false, enabling the button. If the email input's value is not a valid email address, the submitButton.disabled property is set to true, disabling the button.

Of course - instead of using the id attribute to select the elements, you can use the class attribute and adjust the query selector accordingly.

Here's an updated example using classes instead of ids:

<form>
  <label for="email">Email:</label>
  <input type="email" class="email" required>
  <button type="submit" class="submit-button">Submit</button>
</form>

const form = document.querySelector('form');
const emailInput = document.querySelector('.email');
const submitButton = document.querySelector('.submit-button');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  if (emailInput.checkValidity()) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
});

In this example, the query selectors have been changed to use the . class selector instead of the # id selector. The rest of the code remains the same, with the email input selected using document.querySelector('.email') and the submit button selected using document.querySelector('.submit-button').

And here is a codepen embed which you can use and see how each version looks ⬇️