by Sai gowtham

How to validate the email address in JavaScript

In this tutorial, we are going to learn about email validation in JavaScript with the help of examples.

What is Validation?

Validation means when you enter a data in a web app it checks the data that you’ve entered is valid, if the data is valid then application submits to the server otherwise it shows you an error message like The email you've entered is invalid.

Validating Email address

Email address are mostly used in a login and signup forms.To avoid the fake account creations we need to validate the email address entered by the user.

We can validate an email by using the regular expressions(regex), this below function takes the email as an argument and returns true if the email is valid else it returns false if the email is invalid.

const validateEmail= (email) => {
    var regex = /^(([^<>()[\]\\.,;:\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 regex.test(String(email).toLowerCase());
}

console.log(validateEmail('test@test.com')); // true
console.log(validateEmail('test.com'));  // false

Let’s connect the above function with an HTML input field.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JavaScript Email Validation</title>
</head>
<body>
    <h1>JavaScript Email Validation</h1>
    <input name="email" type="email" placeholder="Email"/>
    <button id="btn" >Validate</button>
    <p id="message"></p>
</body>
</html>
const email = document.querySelector('input[name=email]');
const button = document.querySelector('#btn');
const text =  document.querySelector('#message');

const validateEmail= (email) => {
    var regex = /^(([^<>()[\]\\.,;:\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 regex.test(String(email).toLowerCase());
}

button.addEventListener('click',()=>{
    if(validateEmail(email.value)){
      text.innerText="Valid email";
    }else{
      text.innerText="Invalid email";
    }
})

Codepen demo

Built-in HTML5 validation

If you don’t like to use JavaScript to validate your email addresses you can also use Html5 built-in form validation by adding a required attribute to the input field.

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Inbuilt Email Validation</title>
</head>
<body>
  <h1>Inbuilt Email Validation</h1>
<form>
    <input name="email" type="email" required="true" placeholder="Email"/>
    <button id="btn" type="submit" >Submit</button>
</form>
</body>
</html>

In the above code, we have added a required attribute to the input field, so that if anyone enters an invalid email the built-in validation shows some error messages to correct the email.

You can play with this demo.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course