With the help of JavaScript, both the front end and the back end of the website can be created. Therefore, it can be said that JavaScript is a full stack language. For more information about JavaScript, visit: What is JavaScript ?


How To Validate Email Address in JavaScript ? (With RegExp)


Why we need Email Validation? 

Whenever we build a website, there is a contact form in it so that any user can contact the website owner. The contact form has a name, a message as well as an email field. In this email field, the email is filled by the user, then after submitting the form, this email goes to that website owner.


When the website owner checks those details, he finds that some of the emails filled by the users are not correct. Due to which he is unable to contact them. Those invalid emails can be of this type:


In order to solve this type of problem, we need to use validation so that when a user enters an invalid email, then they will know that the email filled by them is not correct and then they can fill the correct email.


Why use JavaScript for Validate Email?

Email validation can also be done by back end language. But this approach will not be right. Because when the request repeatedly goes to the server, the load of the server will increase. For this reason, we will validate the email using JavaScript.


There are many ways in JavaScript to validate email, but in this post we will learn to validate email using regular expressions.


We set some rules in regular expressions. If the email filled by the user follows those rules then that email is considered valid or else the email will be invalid.


We should also know before starting Email Validating

Before validating the email, we need to know the structure of the email. Only then we will be able to validate the email correctly.


Email consists of two parts. In which one part is the local part and the other is the domain part.


The local part of any email address may include 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 any email address may include 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 Regular Expression

Keeping the local part and domain part in mind, we write the following regular expressions code. Almost all types of email addresses will be validated by this.


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


We stored the regular expressions in a variable named regex which we will use in the code further.


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,}))$/; code-box

Complete Email Validation code is as follows:

<form name="myForm" onsubmit="return ValidateEmail()">
<input name="email" placeholer="Enter Email Address" type="text" />
<input name="submit" type="submit" value="Submit" />
</form>
<script>
function ValidateEmail() {

var email = document.myForm.email.value;
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,}))$/;

if(email.match(regex)) {

alert("This Email Address is Valid!");
document.myForm.email.focus();
return true;

} else {

alert("This Email Address is Invalid!");
document.myForm.email.focus();
return false;

}

}
</script> code-box

Example of Email Validation Using Regex


Summary

In this post we learn how to validate email address in JavaScript using Regex. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post