Sling Academy
Home/JavaScript/3 Ways to Validate an Email Address in JavaScript

3 Ways to Validate an Email Address in JavaScript

Last updated: February 20, 2023

This practical, example-based article walks you through 3 different ways to validate an email address in JavaScript.

Using a Regular Expression (Regex)

This is the most common and flexible approach to checking if a string is a valid email address. We can use a regular expression pattern to match the email address format, then test the input string against that pattern.

Example:

const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
};

if(validateEmail('[email protected]')){
    console.log('[email protected] is a valid email');
} else {
    console.log('[email protected] is not a valid email');
}

if(validateEmail('test@example')){
    console.log('test@example is a valid email');
} else {
    console.log('test@example is not a valid email');
}

Output:

[email protected] is a valid email
test@example is not a valid email

Using the built-in Email API

If you’re working in a browser environment (traditional HTML sites with vanilla JavaScript, React, Next.js, Vue, Angular, etc.), you can use the HTMLInputElement.checkValidity() method with the email input type to check if a string is a valid email address.

Example:

<!-- HTML code -->
<input type="email" id="emailInput">
<button onclick="checkEmail()">Check Email</button>

<!-- JS code -->
<script>
function checkEmail() {
  const emailInput = document.getElementById("emailInput");
  const isValidEmail = emailInput.checkValidity();
  console.log(isValidEmail);
}
</script>

Using a third-party library

There is a plethora of open-source libraries that can help you check whether a given email address is valid or not. One of the most popular ones is validator. You can add it to your project by running:

npm i validator

Then use its validator.isEmail() method to check email addresses as shown below:

import validator from 'validator';

const input1 = '[email protected]';
if(validator.isEmail(input1)){
    console.log(`${input1} is a valid email`);
} else {
    console.log(`${input1} is not a valid email`);
}

const input2 = 'example@example';
if(validator.isEmail(input2)){
    console.log(`${input2} is a valid email`);
} else {
    console.log(`${input2} is not a valid email`);
}

Output:

[email protected] is a valid email
example@example is not a valid email

Next Article: JavaScript: Check if a String Starts or Ends With a Substring

Previous Article: How to Convert a String into an Array in JavaScript

Series: JavaScript Strings

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration