How to perform Email Validation in Javascript

0 votes
How can i perform email validation on my web page? can somebody give me the code for email validation?
Feb 6, 2020 in Angular by kartik
• 37,520 points
149 views

1 answer to this question.

0 votes

Validation is a method to authenticate the user. JavaScript provides the facility to validate the form on the client-side so data processing will be faster than server-side validation.

Email Validation in JavaScript – Step by Step
Validating email is a very important point while validating an HTML form.  An email is a string or a subset of ASCII characters that are separated into two parts by “@” symbol.

The first part can consist of the following ASCII Characters:

  • Uppercase (A-Z) and lowercase (a-z) letters
  • Digits (0-9)
  • Characters such as ! # $ % & ‘ * + – / = ? ^ _ ` { | } ~
  • Character . ( period, dot or fullstop) but it should not be the first or last character and should not come one after the other
Email-Validation.js
function ValidateEmail(inputText)

{

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

if(inputText.value.match(mailformat))

{

alert("You have entered a valid email address!");    //The pop up alert for a valid email address

document.form1.text1.focus();

return true;

}

else

{

alert("You have entered an invalid email address!");    //The pop up alert for an invalid email address

document.form1.text1.focus();

return false;

}

}

Email-validation.html

<!DOCTYPE html>

<html lang="en">

<head>

<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

</head>

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

<div class="mail">

<h2>Enter email to Validate</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>  //Adding the submit button

<li> </li>

</ul>

</form>

</div>

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

</body>

</html>

Email-Validation.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;

}
answered Feb 6, 2020 by Niroj
• 82,760 points

Related Questions In Angular

0 votes
3 answers

How to load external scripts dynamically in Angular?

Hello kartik, You can use following technique to ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,760 points
35,023 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,760 points
10,420 views
0 votes
1 answer

How to update nested state properties in React

Hello @kartik, In order to setState for a nested object ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,760 points
5,964 views
0 votes
1 answer

How to set session timeout in web.config?

Hello @kartik, If you want to set the ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,760 points
2,303 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,760 points

edited Jan 21, 2020 by Niroj 246 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,760 points

edited Jan 21, 2020 by Niroj 275 views
0 votes
3 answers

Explain the difference between visibility:hidden; and display:none?

display:none means that the tag in question will ...READ MORE

answered Dec 13, 2020 in Web Development by Gitika
• 65,910 points
44,293 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,760 points

edited Jan 21, 2020 by Niroj 188 views
0 votes
2 answers

How to detect a route change in Angular?

Hii Kartik For Angular 7 someone should write like: this.router.events.subscribe((event: Event) ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,760 points
15,362 views