Blog_Banner_Asset
    Homebreadcumb forward arrow iconBlogbreadcumb forward arrow iconFull Stack Developmentbreadcumb forward arrow iconHow To Do Email Validation In JavaScript? [With Examples]

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

Last updated:
23rd Feb, 2021
Views
Read Time
5 Mins
share image icon
In this article
Chevron in toc
View All
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.

Check out our free courses to get an edge over the competition.

Explore Our Software Development Free Courses

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. 

Ads of upGrad blog

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.

Check Out upGrad Java Bootcamp

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

Our learners also read: Java free online courses!

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

Explore our Popular Software Engineering Courses

Check Out upGrad Full Stack Development Bootcamp (JS/MERN)

upGrad’s Exclusive Software and Tech Webinar for you –

SAAS Business – What is So Different?

 

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

In-Demand Software Development Skills

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

Ads of upGrad blog

Learn Software Courses online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs, or Masters Programs to fast-track your career.

Read our Popular Articles related to Software Development

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 Executive PG Program 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.

Profile

Rohan Vats

Blog Author
Software Engineering Manager @ upGrad. Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.

Frequently Asked Questions (FAQs)

1What is regular expression in programming?

Regular expressions are a type of pattern used to find and manipulate text. They are a commonly used tool for extracting data from strings or text. You can think of them being similar to wildcard characters such as star * or question mark ?. They are not just used in programming though. For example, the Linux command line uses regular expressions to search for files. Simply put, regular expression is a set of symbols and characters that can be used to match a certain pattern. It is used to match the pattern against a certain text. Using regular expression is one of the most powerful features in programming.

2What are the applications of regular expressions?

Regular expressions are used in many places, but the most obvious one is text processing. If you have to parse a text file, search a string with hundreds of words in it, or validate an email-addresses, you use regular expressions. Like any specialized language, regular expressions can be a bit arcane, but if you take the time to learn them well, you’ll find them quite useful. The next thing is that you should learn to use a couple of regular expressions library like PCRE or JGsoft.

3What are the applications of Javascript?

Javascript is the most prevalent language for web development and also one of the most popular programming languages. The applications of Javascript range from beginner to expert and covers foundation to advanced concepts which include calendars and date arithmetic, message boxes, image maps, image processing, video and audio players and more. Javascript is a scripting language that is used for adding dynamic and interactive content to Web pages. It's a lightweight programming language that is used by developers to make websites more interactive and appealing.

Explore Free Courses

Suggested Blogs

Top 40 MySQL Interview Questions &#038; Answers For Beginners &#038; Experienced [2023]
117904
Have a Data engineering or data science interview coming up? Need to practice some of the most asked MySQL interview questions? The article compiles t
Read More

by Rohan Vats

07 Nov 2023

Literals In Java: Types of Literals in Java [With Examples]
5931
Summary: In this article, you will learn about Literals in Java. Literals in Java Integral Literals Floating-Point Literals Char Literals String Lit
Read More

by Rohan Vats

29 Oct 2023

10 Interesting HTML Project Ideas &#038; Topics For Beginners [2023]
392642
Summary In this article, you will learn 10 Interesting HTML Project Topics. Take a glimpse below. A tribute page A survey form Technical documentati
Read More

by Rohan Vats

04 Oct 2023

15 Exciting SQL Project Ideas &#038; Topics For Beginners [2023]
285072
Summary: In this Article, you will learn 15 exciting SQL project ideas & topics for beginners. Library Management System Centralized College Dat
Read More

by Rohan Vats

24 Sep 2023

17 Interesting Java Project Ideas &#038; Topics For Beginners 2023 [Latest]
34962
Summary: In this article, you will learn the 17 Interesting Java Project Ideas & Topics. Take a glimpse below. Airline reservation system Data v
Read More

by Rohan Vats

24 Sep 2023

9 Exciting Software Testing Projects &#038; Topics For Beginners [2023]
8258
Software testing might constitute 50% of a software development budget but it is viewed as a lethargic and unnecessary step by most students. Even edu
Read More

by Rohan Vats

21 Sep 2023

Top 10 Skills to Become a Full-Stack Developer in 2023
218174
In the modern world, if we talk about professional versatility, there’s no one better than a Full Stack Developer to represent the term “versatile.” W
Read More

by Rohan Vats

21 Sep 2023

Java Free Online Course with Certification [2023]
56986
The PYPL Popularity of Programming Language Index maintains that Java is the second most popular programming language in the world, after Python.  Alt
Read More

by Rohan Vats

20 Sep 2023

Salesforce Developer Salary in India in 2023 [For Freshers &#038; Experienced]
903193
Wondering what is the range of salesforce salary in India? Businesses thrive because of customers. It does not matter whether the operations are B2B
Read More

by Rohan Vats

20 Sep 2023

Schedule 1:1 free counsellingTalk to Career Expert
icon
footer sticky close icon