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.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 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 - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course