How To Do Email Validation In JavaScript? [With Examples]

JavaScript is a programming language designed to create applications. It is much faster than other languages because it is so lightweight and easy-to-use. It is used for creating well-designed applications.

Email validation in JavaScript is important for the user experience of creating web applications. Validation helps in passing valid information to a server from the client of the web application.

What is Validation?

Validation refers to the process of examining the values that the user inputs. It plays a crucial role in creating applications and enhances the user experience. Many fields, such as mobile numbers, emails, dates, and passwords, are validated through this process. 

JavaScript makes the validation process faster due to its faster processing of data than other server-side validation. Now let’s have a look at the implementation of the email validation in JavaScript.

Email Validation in JavaScript

Email validation is one of the vital parts of authenticating an HTML form. Email is a subset or a string of ASCII characters, divided into two parts using @ symbol. Its first part consists of private information, and the second one contains the domain name in which an email gets registered.

Here are the ASCII characters of the first part:

  • Special characters such as # * + & ’ ! % @ ? { ^ } ”
  • Numeric characters (0 to 9)
  • Full stop, dot, etc., having a condition that it can’t be the email’s last or the very first letter and can’t be repeated after another.
  • Uppercase alphabets (A to Z) and Lowercase (a to z) alphabets

The second part includes the following:

  • Dots
  • Digits
  • Hyphens
  • Letters

Using regular expressions is one of the best ways of email validation in JavaScript. It utilizes regular expressions for defining the character’s pattern.

Some of the examples of valid email id:

  • Own.minesite@myuniverse.org
  • Siteowner@up.down.net
  • Siteofmine@myuniverse.com

Some Other Examples of Invalid Email Id

  • Owner.me..7080@abcd.com (one on another dots are not allowed)
  • Inownzsite()&@abcd.com (only characters, dash, underscore, and digits are allowed in the regular expression.)
  • Ourwebsiteismne.azbyz.com (here @ symbol is not there)
  • yourminewebsite@.com.you (Here top-level domain can’t begin with a dot)
  • @youmenandwe.we.net (here it can’t start with @ symbol)
  • Younourmetd345@abcd.b (“.b” is not a valid top-level domain)email.js

The file consists of a JavaScript code required for email validation. Here the regular expressions are used to validate an email at the client-side of an application.

Checkpoints for efficient email validation in JavaScript code:

  • Describe a regular expression to validate an email address
  • If an input value matches regular expressions
  • If it matches, sends the alert saying “email address is valid.”
  • If it does not match, send the alert saying, “email address is invalid.”

Related: Password Validation in Javascript

Email Validation Code in JavaScript

Given below is the email validation code in JavaScript. This code can validate if the email created or entered by the user is valid or not. Save the file as filename.js. 

// Code Snippet

function EmailValidation(enteredEmail)

{

var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;

if(enteredEmail.value.match(enteredEmail))

{

alert(“Yeah! a valid email!”);

document.form1.text1.focus();

return true;

}

Else

{

alert(“Sorry! an invalid email!”);

document.form1.text1.focus();

return false;

}

}

The JavaScript function is used in the HTML form as below. Save the file as filename.html:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>email validation in JavaScript</title>

<link rel=’stylesheet’ href=’form-style.css’ type=’text/css’ />

</head>

<body onload=’document.form1.text1.focus()’>

<div class=”mail”>

<h2>Enter the email for Validation</h2>

<form name=”form1″ action=”#”>

<ul>

<li><input type=’text’ name=’text1’/></li>

<li> </li>

<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>

<li> </li>

</ul>

</form>

</div>

<script src=”filename.js”></script>

</body>

</html>

The following code can add style to the form using CSS. Save the file as filename.css.

li {list-style-type: none;

font-size: 16pt;

}

.mail {

margin: auto;

padding-top: 20px;

padding-bottom: 20px;

width: 850px;

background : rgb(150, 195, 208);

border: 1px soild rgb(1, 20, 24);

}

.mail h2 {

margin-left: 36px;

}

input {

font-size: 28pt;

}

input:focus, textarea:focus{

background-color: white;

}

input submit {

font-size: 18pt;

}

Now you can execute the HTML code and get the email validation in JavaScript done.

Read: Javascript Projects in GitHub

Conclusion

Email validation is very crucial to avoid making invalid email addresses. In this article, it is explained, with the code, to validate whether an email id is valid or not and let the system check and notify the user if the email id entered is not valid. 

If you’re interested to learn more about full-stack development, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.

Land on Your Dream Job

UPGRAD AND IIIT-BANGALORE'S PG DIPLOMA IN FULL STACK DEVELOPMENT
LEARN MORE

Leave a comment

Your email address will not be published.

×