In this article, we discuss How to Validate Email in JavaScript

How to Validate Email in JavaScript

How to Validate Email in JavaScript
How to Validate Email in JavaScript

How to Validate Email in JavaScript

JavaScript is a widely-used programming language today in web development, in both front-end and back-end development, and proper email validation is a must-know skill for every software developer.

When we are developing any website or application in JavaScript, we must create some kind of form from where we are getting the emails from the users. It is very important to validate the input field, before doing something else with that piece of information.

Methods to validate Email in JavaScript

There are many ways to validate email address, the three most popular ways are:

  • Using the regex expression
  • Using HTML in-built email validation
  • Using a third party library

As using regex expression is most popular, we will take a look at how we can validate an email address with a regex expression.

Before we start writing the regex expression, we need to know the basics of email validation.

Most of the email addresses are with two parts, the local part and the domain part.

The local part of the email address can contain the following:

  • Any letter or number: a-z, A-Z, 0-9.
  • A dot (.) but should not be first or last character.
  • punctuation: “(),:;<>@[]
  • special characters: !#$%&’*+-/=?^_{|}~

The domain part of the email address can contain the following:

  • Any letter or number: a-z, A-Z, 0-9.
  • The hyphen (-) but should not be first or last character.

Email validation using the Regex Expression

There is no general expression to validate an email address. Every developer out there is using a different set of regex in their program to validate an email address. Before we use any regex in our code, we first need to validate it with testing some email addresses, both valid and invalid.

/^(([^<>()\[\]\\.,;:\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,}))$/

The above example is a regex that can validate almost all (99%) of the email addresses.

Regex Example using JavaScript to Validate Email

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

In the example above we have a simple JavaScript arrow function, which will validate any email address we insert. The code above is not hard to understand, we are simply using a regular expression to compare it with the email address provided after it is converted to lowercase.

How to Validate Email in JavaScript

Another Way to Validate Email

A email is tricky because of its format. Some of basic checks are as follows:

  • Presence of @ and . character
  • Presence of at least one character before and after the @.
  • Presence of at least two characters after . (dot).

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Email validation</title> 
</head>
<body>
<div>
<h2>JavaScript email validation</h2>
<form name="form1" action="#"> 
Email: <input type='text' name='email'/></br></br>
<input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form1.email)"/>
</form>
</div>
</body>
</html>

JS

In this below code you can add you JS File

function validateEmail(emailId)
{
var mailformat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(emailId.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("Invalid email address.");
document.form1.text1.focus();
return false;
}
}    

End of the article I hope you understand the How to Validate Email in JavaScript

Also Checkout What are the different types of operators in JavaScript 2021

If you interested in Entertainment genre please check this also Celebrity Birthday Today

Source: Various

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *