How to Do an Email Validation in JavaScript?

Lesson 12 of 36By Taha Sufiyan

Last updated on Jul 16, 202414619880

Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch
Overview
An Introduction to JavaScript: Here Is All You Need to Know
Lesson - 1
JavaScript Hello World: Here's What You Need To Know
Lesson - 2
All You Need to Know About JavaScript Arrays
Lesson - 3
Using Array Filter In JavaScript to Filter Array Elements
Lesson - 4
Everything You Need to Know About Array Reduce JavaScript
Lesson - 5
Introduction To JavaScript Loops: Do-While, For, For-In Loops
Lesson - 6
All You Need to Learn About Javascript Functions
Lesson - 7
The Best Guide on How to Implement JavaScript Closures
Lesson - 8
JavaScript “This” Keyword and How to Implement It
Lesson - 9
How to Implement JavaScript Form Validation
Lesson - 10
An Introduction Guide To JavaScript RegEx
Lesson - 11
How to Do an Email Validation in JavaScript?
Lesson - 12
All You Need to Know About JavaScript Promises
Lesson - 13
How to Implement JavaScript Async/Await
Lesson - 14
JavaScript DOM Tutorial: 2020 Edition
Lesson - 15
JavaScript Objects: Properties, Methods, and Accessors
Lesson - 16
Typeof in JavaScript: Checking Data Types Using the Typeof Operator
Lesson - 17
Callback Functions in JavaScript: Everything You Need to Know
Lesson - 18
An Introduction to Javascript Games: The Best Guide
Lesson - 19
An Easy Guide to Build a Calculator App in JavaScript
Lesson - 20
Javascript Projects: The Best Guide
Lesson - 21
Best JavaScript Examples You Must Try in 2024
Lesson - 22
What is OOP in JavaScript? How is it Implemented?
Lesson - 23
JavaScript Events
Lesson - 24
Everything You Need to Know About Let in Javascript
Lesson - 25
Trying Your Hands on Java? Here’s a Guide to Help You Add a New Line in JavaScript
Lesson - 26
Understanding Operators in JavaScript
Lesson - 27
Redirect in Javascript: A Complete Guide to Help You With the Concept
Lesson - 28
Top 80+ JavaScript Interview Questions and Answers for 2025
Lesson - 29
Tips and Tricks That You Should Know Before Going to a Coding Interview
Lesson - 30
Top 65+ JQuery Interview Questions And Answers for 2025
Lesson - 31
Your Complete Guide on the Scope of Variables in JavaScript
Lesson - 32
An Introduction to JavaScript Void 0
Lesson - 33
Understanding Why Is the Password Validation Process Important in JavaScript
Lesson - 34
Java Vs .NET: Which Is the Best Technology to Choose?
Lesson - 35
A Guide to Convert String to Int in Javascript
Lesson - 36

Table of Contents

View More

JavaScript is an open-source programming language. It is designed for creating web-centric applications. It is lightweight and interpreted, which makes it much faster than other languages. JavaScript is used to create beautifully designed web applications.

Email validation in JavaScript is an important part of the user experience of a web application. Validation assists in inputting forms and makes sure that only valid information is passed to the server from the client-side of the application.

What is Validation?

Validation is commonly defined as the process of checking the values inputted by the user. It plays an important role in web applications and enhances the overall user experience. We can validate email, password, date, mobile numbers, and many other fields.

JavaScript is used to validate the form data on the client-side of a web application, and this speeds up the validation process because of faster data processing when compared with server-side validation.

Now that we know a bit about validation, let’s go ahead and implement email validation in JavaScript.

How to validate email using JavaScript

Email validation is a critical part of validating an HTML form. An email is a string or a subset of ASCII characters separated into two parts by @ symbol. The first part contains personal information while the other contains the domain name at which the email is registered.

The personal information part can contain the following ASCII characters:

Uppercase and lowercase letters (A-Z and a-z)
Numeric characters (0-9)
Special characters - ! # $ % & ' * + - / = ? ^ _ ` { | } ~
Period, dot, or full stop (.) with the condition that it cannot be the first or last letter of the email and cannot repeat one after another.

The domain name contains:

Letters
Digits
Hyphens
Dots

One of the most popular ways of validating email in JavaScript is by using regular expressions. JavaScript uses regular expressions to describe a pattern of characters.

email.js

This file contains the JavaScript code that we need for email validation. We are using regular expressions to validate the email at the client-side of a web application.

function ValidateEmail(input) {

var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

if (input.value.match(validRegex)) {

alert("Valid email address!");

document.form1.text1.focus();

return true;

} else {

alert("Invalid email address!");

document.form1.text1.focus();

return false;

}

}

Define a regular expression for validating email address
Check if the input value matches with regular expression
If it does match, send an alert stating “valid email address”
If it doesn’t match, send an alert stating “invalid email address”

email.html

This file contains the base HTML code that has all the elements defined for this webpage.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>JavaScript Email Validation</title>

<link rel="stylesheet" href="email.css" type="text/css" />

</head>

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

<div class="mail">

<h2>Input an email address</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="email.js"></script>

</body>

</html>

Related Reading: What is HTML (Hyper Text Markup Language)?

email.css

This file contains the CSS styles that are needed for styling the HTML elements in the webpage. The styles are self-explanatory and you are free to change these styles according to your preference.

li {

list-style-type: none;

font-size: 16pt;

}

.mail {

margin: auto;

padding-top: 10px;

padding-bottom: 10px;

width: 400px;

background: teal;

border: 1px soild silver;

}

.mail h2 {

margin-left: 38px;

color: white;

}

input {

font-size: 20pt;

}

input:focus,

textarea:focus {

background-color: lightyellow;

}

input validate {

font-size: 12pt;

}

.rq {

color: #ff0000;

font-size: 10pt;

}

Output

The output should look and feel like this in the end.

email-validation

Fig: Email Validation in JavaScript

We hope you understood how to implement email validation in JavaScript after going through this article. This is a relatively simple topic that gets used in various kinds of web applications.

Learn email validation in JavaScript to enhance your JavaScript skills. Our Java Course provides detailed instruction on email validation, ensuring competence in designing reliable, user-friendly forms for web application development and coding skills.

Related Reading: The Ultimate CSS Tutorial for Beginners

Get Ahead of the Curve and Master JavaScript Today

Are you wondering how you can gain the skills necessary to take advantage of JavaScript’s immense popularity now that you are familiar with email validation? We have got your back! We offer a comprehensive Java Certification Training, which will help you become career-ready upon completion. Also email validation is one of the commonly asked topics in the J ava interview questions. So, get started today and seize your future!

If you’re an aspiring web and mobile developer, Java Certification Training will broaden your skills and career horizons.

Do you have any questions for us? Please mention it in the comments section of this ‘Email Validation in JavaScript’ article and we'll have our experts answer it for you.

FAQs

1) What is validation for an email?

Email validation is a process to check if an email address is correctly formatted and follows the standard rules for email addresses.

2) How to validate an email with regex?

Use this regex pattern: /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/

3) How do I validate email format?

You can validate the format using regular expressions (regex) or use built-in email validation functions in programming languages.

4) How to validate email in JavaScript without regex?

You can use the built-in HTML5 input element with type="email" or use the email input validation in JavaScript.

5) What is the regex code for email validation in JavaScript?

The regex code for email validation in JavaScript is:
/^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/

Find our Full Stack Java Developer Masters Program Online Bootcamp in top cities:

Name	Date	Place
Full Stack Java Developer Masters Program	Cohort starts on 8th Jan 2025, Weekend batch	Your City	View Details

About the Author

Taha is a Research Analyst at Simplilearn. He is passionate about building great user interfaces and keeps himself updated on the world of Artificial Intelligence. Taha is also interested in gaming and photography.

View More

Recommended Resources

prevNext

Acknowledgement
PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.