Easy way to IT Job

Email Validation with JavaScript
Share on your Social Media

Email Validation with JavaScript

Published On: July 20, 2022

JavaScript is good for front-end, back-end, and full-stack development as it helps developers create impressive websites.

Generally, validation is used for authenticating a user. Here in this Blog, we are going to explain how email validation is coded with JavaScript with step-by-step explanations.

What is validation?

Validation is the process of authenticating an authorized user for a website.

Most JavaScript developers preferred JavaScript as it provides the specialized feature of validating the form on the client-side as it is faster than server-side validation.

It is used to validate names, passwords, email, mobile numbers, dates, and so on for authenticating users.

Client-side validation is used to protect the client from identifying whether the form is accepted before reloading a page.

Server-side validation is used when the client-side validation gets bypassed by turning off JavaScript.

Step-by-step process of email validation in JavaScript

The validation of email is important for validating an HTML form. An email is a string that will be divided into two parts with the “@” symbol.

The first part contains ASCII Characters and it can be included with uppercase and lowercase letters (A – Z or a – z), digits from 0 to 9, and special characters like ! #%^&*}{|[]?~, and a period character (.).

the second part contains the domain name and it can contain letters, digits, hyphens, or dots. The mail should be validated with a regular expression /^w+([.]?w+)*@w+([.]?w+)*(.w{2,3})+$/.

Now, the following code explains how this regular expression can be used for validating an email.

Sample Email Validation


function ValidateEmail(inputText)


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



alert(“The email address is valid!”); //The pop up alert for a valid email address


return true;




alert(“The email address in invalid!”); //The pop up alert for an invalid email address


return false;



Then we can apply the JavaScript function in the HTML form as follows


<!DOCTYPE html>

<html lang=”en”>


<meta charset=”utf-8″>

<title>JavaScript email validation</title>

<link rel=’stylesheet’ href=’form-style.css’ type=’text/css’ /> //link to the source file of css to add styles


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

<div class=”mail”>

<h2>Enter email to Validate</h2>

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


<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> //Adding the submit button

<li> </li>




<script src=”email-validation.js”></script> //link to the source file of javascript function



Now, we can add style to the form using CSS


li {list-style-type: none;

font-size: 16pt;


.mail {

margin: auto;

padding-top: 10px;

padding-bottom: 10px;

width: 800px;

background : rgb(153, 198, 211);

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


.mail h2 {

margin-left: 38px;


input {

font-size: 20pt;


input:focus, textarea:focus{

background-color: lightyellow;


input submit {

font-size: 10pt;


Output of Email Validation


When you check with an input, the following output will be displayed.


When you enter an invalid email, it shows output as follows



We hope this article helps you understand the email validation process in JavaScript.

Enroll in our JavaScript Training in Chennai for enjoying complete experimental-based coaching.

Our alumni are working in top companies and prove their skills through the industry-standard JavaScript Course provided by Softlogic Systems.

Share on your Social Media

Just a minute!

If you have any questions that you did not find answers for, our counsellors are here to answer them. You can get all your queries answered before deciding to join SLA and move your career forward.

We are excited to get started with you

Give us your information and we will arange for a free call (at your convenience) with one of our counsellors. You can get all your queries answered before deciding to join SLA and move your career forward.