Validate list of email addresses in javascript

In this article we will learn how to validate email addresses in javascript. We are not just provide you a code but we will also tell you the code work flow , application of this codes and where to use it.

 There are lots of ways to validate an email address. We are going to use two different method in this article. First method we will use to validate a single email value and the second method we will use to validate a list of comma separated value to validate email addresses.

Method 1

Validate single email address

In this method  function will return true or false as per your input. If the assigned value is valid then it will return true  and if the assigned value is invalid then it will return the false. So using this method you can check the value we passed to this regex is a valid email address value or not.

This method will validate a single email address. Here we use the regular expression /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/  to validate input value.

Description of regulare expression is listed below.

1. Email address must begin with alpha-numeric characters (both lowercase and uppercase characters are allowed). It may have periods,underscores and hyphens.

2. There must be a ‘@’ symbol after initial characters.

3. After the ‘@’ sign there must be some alpha-numeric characters. It can also contain period (‘.’) and and hyphens(‘-‘).

4. After the second group of characters there must be a period (‘.’). This is to separate domain and subdomain names.

5. Email address must end with two to four alphabets. Having a-z and A-Z means that both lowercase and uppercase letters are allowed.

6. Email has minimum and maximum number of characters. This will allow domain names with 2, 3 and 4 characters e.g.; us, tx, org, com, net, wxyz.

<input type="text" id="email" value="testing@gmail.com" />
<a href="javascript:void(0)" onclick="validateEmail()"> Validate Email </a>
  
<script>
function validateEmail(){
	email = document.getElementById('email').value;
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
	alert(emailPattern.test(email));
 	return emailPattern.test(email);
}

</script>

Try code here. You can check the code functionality in result tab by enter input field value and click on button validate email link.

Method 2

Validate a list of comma separated email addresses 

In this function we are going to validate comma separated value using javascript. First we will take input comma separated  string value and convert it into array and pass the value to foreach method and call function IsValidEmail to check the value we passed  is valid  value or invalid.

<input type="text" id="email" value="testing@gmail.com, another@gmail.com" placeholder="Enter comma separated Email" />
<a href="javascript:void(0)" onclick="ValidateEmails()"> Validate Email </a>

<script>
function IsValidEmail(elementValue){
	//Regex value to validate email
   	var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
	// Return true if the value is valid and false if not valid
  	return emailPattern.test(elementValue);
 }

 function ValidateEmails() {
    var message = ""
	//Get comma seprated string value from input
    var inputs = document.getElementById("email").value;
	// Convert this comma separated string value to array 
	var inputsArr = inputs.split(',');

	inputsArr.forEach(function (email) {
		//Remove white space from email
		email = email.replace(/\s/g, '');
		//Validate the email value 
		if (IsValidEmail(email)) {
			message += email + " - Valid Email Address.\n"
		} else {
			message += email + " - Invalid Email Address.\n"
		}
	});

	alert(message);
}
</script>

Try code here.