Email Validation in JavaScript: Techniques, Implementation, and Best Practices

Also Read: Password Validation in JavaScript [Step by Step Setup Explained]

Top 3 Effective Methods for Email Validation in JavaScript

To validate email addresses in JavaScript, you can choose from three key methods: 

• Regex for custom, complex validation patterns, 
• HTML5 input type="email" for a simple, built-in solution, 
• and third-party libraries like validator.js for reliable, pre-built validation functions. 

Choose Regex for flexibility, HTML5 for quick implementation, and libraries when you need robust, scalable validation with less code.

Here are the top methods for performing email validation in JavaScript, along with examples for each approach:

1. Using Regular Expressions

Regular Expressions (Regex) can be used to define patterns for valid email addresses. This method checks if the structure of the email matches the required pattern.

Regex is an efficient way to check email formats but it doesn't guarantee that the email is real or active.
Example Code:

// Regular Expression for email validation
// Explanation: 
// The regex pattern matches the following:
// - ^[a-zA-Z0-9._-]+: Starts with one or more letters, numbers, dots, underscores, or hyphens.
// - @: The '@' symbol separating the username from the domain.
// - [a-zA-Z0-9.-]+: The domain part allows letters, numbers, dots, or hyphens.
// - \.: A literal dot separating the domain from the top-level domain (TLD).
// - [a-zA-Z]{2,6}$: The TLD must be between 2 to 6 characters (like .com, .org, etc.).
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

// Function to validate an email using the regex pattern
function validateEmail(email) {
  return emailRegex.test(email);  // Returns true if the email matches the pattern, otherwise false
}

// Test cases with valid and invalid email inputs
console.log(validateEmail("user@example.com")); // true (Valid email format)
console.log(validateEmail("user@.com"));        // false (Invalid email format: domain part is missing)

Explanation of Code:

• The regex pattern is designed to match a basic, commonly accepted email structure.
• The function validateEmail() uses emailRegex.test() to check whether the input email string matches the regex pattern.
• In the test cases: "user@example.com" is valid and returns true because it matches the pattern and "user@.com" is invalid and returns false because the domain section before the dot is missing.

Output:

true
false

2. Using HTML5 Input Type

HTML5 provides a built-in input type for email fields, allowing browsers to automatically check if the entered text follows a valid email format. The <input type="email"> field in HTML ensures basic client-side validation before submission. 

However, it's important to note that browser validation can be bypassed by disabling JavaScript or modifying the request. Therefore, server-side validation is still essential to ensure the email's validity and security before processing the data.

Example Code:

<form>
  <!-- Label for the email input field -->
  <label for="email">Enter your email:</label>
  
  <!-- Email input field with type="email" for browser-based validation -->
  <input type="email" id="email" name="email" required>
  
  <!-- Submit button to submit the form -->
  <input type="submit" value="Submit">
</form>

Explanation:

• The form contains an input field that uses the type="email" attribute, which triggers built-in browser validation for email format.
• If the user tries to submit the form with an invalid email (like user@.com), the browser will display an error message and will not submit the form.
• If the email is valid (e.g., user@example.com), the form will be submitted.

Expected Output:

Invalid Email (e.g., user@.com): If the user enters user@.com and clicks Submit, the browser will prevent form submission and display an error message such as:

"Please include an '@' in the email address. 'user@.com' is missing an '@' symbol."

Valid Email (e.g., user@example.com): If the user enters a valid email address like user@example.com and clicks Submit, the form will be submitted successfully.

Since this is a client-side validation using HTML5, the browser’s default behavior will ensure the correct email format before the form is submitted.

Also Read: 27 Innovative HTML Project Ideas for Beginners in 2025: Source Code, Benefits, and More

3. Using Third-Party Libraries

Libraries like validator.js simplify the process of validating email addresses, providing pre-built methods that handle complex email validation rules.

Validator libraries save time by implementing thorough and tested validation patterns, making it easier to handle various edge cases.

Example Code:

// Assuming you have installed validator.js using: npm install validator
const validator = require('validator'); // Importing the validator library

// Function to validate an email using validator.js
function validateEmail(email) {
  return validator.isEmail(email);  // Returns true if the email is valid, otherwise false
}

// Test cases for valid and invalid email inputs
console.log(validateEmail("user@example.com")); // true (Valid email format)
console.log(validateEmail("user@.com"));        // false (Invalid email format: domain part is missing)

Explanation of Code:

• validator.isEmail(email): This method from the validator.js library checks if the provided email string matches the correct email format. It is more comprehensive and reliable than regular expressions.
• console.log(validateEmail("user@example.com")): This test case will return true because user@example.com is a valid email.
• console.log(validateEmail("user@.com")): This test case will return false because user@.com is an invalid email (missing the domain name).

Expected Output:

true
false

This approach is very straightforward and uses an external library (validator.js) for easy and reliable email validation, ensuring consistency across various scenarios.

Also Read: How To Do Email Marketing [Complete Tutorial - Part 1] 

Now, let’s walk through a step-by-step email validation guide in JavaScript.

How to Do Email Validation in JavaScript (Step-by-Step Guide)

This step-by-step approach is key when ensuring emails are correctly formatted before submission, preventing invalid entries and ensuring smooth data handling in your web applications.

Step 1: Define a Regex Pattern for Email Validation

Start by defining a regular expression (regex) that will match the structure of a valid email address. This regex will check for an email like user@example.com.

Regex Pattern:

const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

Explanation:

• ^[a-zA-Z0-9._-]+: The username part allows letters, numbers, dots, underscores, and hyphens.
• @: This symbol separates the username from the domain.
  [a-zA-Z0-9.-]+: The domain part can include letters, numbers, dots, and hyphens.
• \.[a-zA-Z]{2,}$: The top-level domain (TLD) is more inclusive, allowing any valid TLD with 2 or more characters (e.g., .com, .online, .xyz, .museum). 
• This change accommodates newer TLDs that can be longer than 6 characters.

Also Read: Best Javascript Project Ideas & Topics [For Freshers & Experienced]

Step 2: Implement the Validation Function in JavaScript

Next, create a function that uses this regex to validate the email. This function will return true if the email matches the pattern and false if it doesn't.

Validation Function:

function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  return emailRegex.test(email);  // Returns true if valid, false if not
}

The function uses test() to check if the email matches the regex pattern.

Step 3: Integrate Validation with an HTML Form

Now, let's add the email validation to an HTML form. This will allow users to input their email and have it validated when they submit the form.

HTML Form:

<form id="emailForm">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
  <p id="errorMessage" style="color: red; display: none;">Please enter a valid email address.</p>
</form>

The form includes an input field for the email and a submit button. You also add a hidden error message (<p>) that will display if the email is invalid.

Also Read: Top 10 Reasons Why You Should Learn JavaScript | Boost Your Coding Skills

Step 4: Display Appropriate Error Messages

Now, you’ll handle form submission. If the email is invalid, it will display an error message and prevent the form from submitting.

JavaScript Code:

document.getElementById('emailForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent form from submitting

  const email = document.getElementById('email').value;
  const errorMessage = document.getElementById('errorMessage');

  // Check if the email is valid
  if (validateEmail(email)) {
    errorMessage.style.display = 'none'; // Hide error message
    alert('Email is valid!');
  } else {
    errorMessage.style.display = 'block'; // Show error message
  }
});

Explanation:

• When you submit the form, JavaScript will prevent it from submitting by default.
• If the email is valid, it will hide the error message and show an alert that the email is valid.
• If the email is invalid, it will display the error message below the email input.

Here’s a full code snipped:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Validation</title>
</head>
<body>

<form id="emailForm">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
  <p id="errorMessage" style="color: red; display: none;">Please enter a valid email address.</p>
</form>

<script>
// Step 1: Define a regex pattern for email validation
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

// Step 2: Implement the validation function in JavaScript
function validateEmail(email) {
  return emailRegex.test(email); // Returns true if valid, false if not
}

// Step 3: Integrate validation with an HTML form
document.getElementById('emailForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent form from submitting

  const email = document.getElementById('email').value;
  const errorMessage = document.getElementById('errorMessage');

  // Step 4: Display appropriate error messages
  if (validateEmail(email)) {
    errorMessage.style.display = 'none'; // Hide error message
    alert('Email is valid!');
  } else {
    errorMessage.style.display = 'block'; // Show error message
  }
});
</script>

</body>
</html>

Expected Output:

• Valid Email: If you enter a valid email (like user@example.com), the form will not show any error and will display an alert saying "Email is valid!"
• Invalid Email: If you enter an invalid email (like user@.com), the form will display an error message saying, "Please enter a valid email address."

Also Read: Data Structures in Javascript Explained: Importance, Types & Advantages

With a clear understanding of the process, let’s look at the complete code to implement email validation using HTML, CSS, and JavaScript.

Complete Code for Email Validation Using HTML, CSS, and JavaScript

HTML sets up the form and input fields, while CSS gives it a clean, user-friendly design. JavaScript then validates the email with a regex pattern, instantly providing feedback to the user. Together, these three work seamlessly to ensure a smooth and efficient form submission experience.

This approach ensures that users are informed of input errors as soon as they submit the form, improving the user experience while maintaining the integrity of your data.

1. email.html

This file contains the HTML structure for the form and links to the CSS and JavaScript files.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Validation Form</title>
  <link rel="stylesheet" href="email.css"> <!-- Linking CSS file for styling -->
</head>
<body>

  <div class="container"> 
    <form id="emailForm">
      <label for="email">Enter your email:</label>
      <input type="email" id="email" name="email" required placeholder="user@example.com">
      <input type="submit" value="Submit">
      <p id="errorMessage" class="error">Please enter a valid email address.</p>
    </form>
  </div>

  <script src="email.js"></script> <!-- Linking JavaScript file for validation -->
</body>
</html>

Explanation:

• The form includes an email input field and a submit button.
• The <input type="email"> ensures that the browser will apply basic email format validation.
• If the email is invalid, an error message (<p id="errorMessage">) is displayed.
• The JavaScript file (email.js) is linked at the bottom, which will handle the email validation when the form is submitted.

2. email.css

This file contains the CSS that styles the form and makes it visually appealing.

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container styling */
.container {
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Form styling */
form {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 8px;
}

input[type="email"], input[type="submit"] {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="email"]:focus, input[type="submit"]:focus {
  outline: none;
  border-color: #5c9df5;
}

/* Error message styling */
.error {
  color: red;
  font-size: 14px;
  display: none;
}

Explanation:

• The CSS resets default margins and padding to ensure consistent styling across different browsers.
• The .container class centers the form on the page and adds some basic styling like a background color and shadow.
• The form and input fields are styled for a clean, simple look with clear focus states on the input fields.
• The error message (.error) is hidden by default and will only show when the email is invalid.

3. email.js

This JavaScript file contains the logic for validating the email address using a regular expression (regex).

// Get form elements
const emailForm = document.getElementById('emailForm');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('errorMessage');

// Regular expression for basic email validation
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

// Function to validate the email
function validateEmail(email) {
  return emailRegex.test(email); // Returns true if valid, false if not
}

// Add event listener for form submission
emailForm.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent form from submitting
  
  const email = emailInput.value;
  
  // Validate the email and show error message if invalid
  if (validateEmail(email)) {
    errorMessage.style.display = 'none'; // Hide error message
    alert('Email is valid!'); // You can replace this with form submission logic
  } else {
    errorMessage.style.display = 'block'; // Show error message
  }
});

Explanation:

• The emailRegex checks if the email follows a valid format. The regex pattern matches emails like user@example.com and ensures the username, domain, and top-level domain are correctly formatted.
• The validateEmail() function uses the test() method to check if the email matches the regex pattern.
• When the form is submitted, the JavaScript event listener prevents the form from submitting (event.preventDefault()), validates the email, and either hides or shows the error message based on the result.

Expected Output:

Valid Email Example: If you enter user@example.com and click Submit, the email is valid, and the alert "Email is valid!" will appear. The error message below the input will remain hidden.

Alert: Email is valid!

The form will not be submitted in this case, but in a production environment, you could replace the alert with actual form submission logic.

Invalid Email Example: If you enter an invalid email like user@.com and click Submit, the email fails the validation check. The error message "Please enter a valid email address." will appear below the input field.

Error Message: Please enter a valid email address.

The form will not be submitted, and the user will be prompted to enter a valid email.

Also Read: 10 Practical Uses of JavaScript for Every Developer

As you start applying this code, it’s crucial to know common mistakes to avoid and best practices to follow, ensuring your validation is both efficient and error-free.

upGrad’s Exclusive Software and Tech Webinar for you –

SAAS Business – What is So Different?

Email Validation: Common Mistakes to Avoid & Best Practices

When validating emails, developers often miss edge cases, overcomplicate regex, or provide unclear error messages. These mistakes can frustrate users or lead to incorrect validations. In this section, we’ll explore when and why these issues occur and how to avoid them with best practices to improve accuracy and user experience.

Common pitfalls and best practices:

Also Read: Top 10 JavaScript Libraries to Learn

By avoiding these pitfalls and following best practices, you can ensure your email validation process is both robust and user-friendly. Now, let’s explore how upGrad can support your journey in learning JavaScript and web development.

How upGrad Can Accelerate Your JavaScript & Web Development Learning Journey?

upGrad’s JavaScript and web development courses are built for real-world application, helping you gain practical skills that matter to employers. You can upskill with hands-on projects, expert-led training, and flexible learning without disrupting your schedule.

Ready to advance your web development career? Explore upGrad’s JavaScript and other relevant web development courses today:

• Core Java Basics
• JavaScript Basics from Scratch
• Advanced JavaScript for All
• Java Object-oriented Programming
• AI-Powered Full Stack Development Course by IIITB

You can also get personalized career counseling with upGrad to guide your career path, or visit your nearest upGrad center and start hands-on training today! 

Boost your career with our popular Software Engineering courses, offering hands-on training and expert guidance to turn you into a skilled software developer.

Explore our Popular Software Engineering Courses

Master in-demand Software Development skills like coding, system design, DevOps, and agile methodologies to excel in today’s competitive tech industry.

In-Demand Software Development Skills

Stay informed with our widely-read Software Development articles, covering everything from coding techniques to the latest advancements in software engineering.

Read our Popular Articles related to Software