Validating an Email Address in JavaScript

Validating an Email Address in JavaScript

In this tutorial, we are going to learn about how to validate the email address 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 regular expressions, 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.