![How To Do Email Validation In JavaScript? [With Examples]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2019%2F07%2FBlog_FI_July_upGrads-Knowledge-base.png&w=1920&q=75)
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.
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
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
| Why Learn to Code? How Learn to Code? | How to Install Specific Version of NPM Package? | Types of Inheritance in C++ What Should You Know? |
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.
![Top 40 MySQL Interview Questions & Answers For Beginners & Experienced [2023]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F08%2F955-MySQL-interview-questions.png&w=3840&q=75)
![Literals In Java: Types of Literals in Java [With Examples]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2021%2F02%2F1747.png&w=3840&q=75)
![10 Interesting HTML Project Ideas & Topics For Beginners [2023]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F06%2F653.png&w=3840&q=75)
![15 Exciting SQL Project Ideas & Topics For Beginners [2023]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F05%2F503-SQL-Project-Ideas.png&w=3840&q=75)
![17 Interesting Java Project Ideas & Topics For Beginners 2023 [Latest]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F05%2F518-Java-Project-Ideas.png&w=3840&q=75)
![9 Exciting Software Testing Projects & Topics For Beginners [2023]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2021%2F04%2F28095517%2F2025-1.png&w=3840&q=75)
![Java Free Online Course with Certification [2023]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F11%2FJava.png&w=3840&q=75)
![Salesforce Developer Salary in India in 2023 [For Freshers & Experienced]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F06%2F655.png&w=3840&q=75)
