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 in Angular by kartik
• 1,910 points
13 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 by Niroj
• 3,230 points

Related Questions In Angular

0 votes
1 answer

How can we achieve transclusion in AngularJs?

Hii,  In order to know what transclusion is ...READ MORE

answered Feb 5 in Angular by Niroj
• 3,230 points
15 views
0 votes
1 answer

How can we redirect to an existing route using ngRoute?

Routing is just another way of fixing some content ...READ MORE

answered Feb 6 in Angular by Niroj
• 3,230 points
19 views
0 votes
1 answer

How can we redirect to another page from existing page on clicking alert?

hii, It is really simple to redirect from ...READ MORE

answered Feb 6 in Angular by Niroj
• 3,230 points
16 views
0 votes
1 answer

How can we go back to previous page after having some error on request made through current page ?

$route is used for deep-linking URLs to controllers ...READ MORE

answered 6 days ago in Angular by Niroj
• 3,230 points
15 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 in Web Development by Niroj
• 3,230 points

edited Jan 21 by Niroj 29 views
+1 vote
1 answer

What is css box module?

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

answered Jan 20 in Web Development by Niroj
• 3,230 points

edited Jan 21 by Niroj 30 views
0 votes
1 answer

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

hii, visibility:hidden; and display:none are totally different used ...READ MORE

answered Jan 20 in Web Development by Niroj
• 3,230 points
57 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 in Web Development by Niroj
• 3,230 points

edited Jan 21 by Niroj 31 views
0 votes
1 answer

How compile, controller, pre-linking and post linking works in Angularjs?

Explanation of compile and link process don't ...READ MORE

answered Jan 31 in Angular by Niroj
• 3,230 points
18 views