Email validation is an important step when creating forms on websites.
Email validation is used to authenticate the user name, password, email, phone number, etc.
Email validation in JavaScript is an important part of the user experience of a web application.
JavaScript authenticates the information on the client-side which enhances the data processing procedure.
JavaScript is lightweight and interpreted, which makes it much faster than other languages.
In this article, we will show you how to validate emails with Javascript.
Let’s learn how to do email validation using JavaScript.
What is email Validation?
Email Validation in JavaScript
Email validation is the process of checking the values inputted by the user.
Email validation plays a vital role in web applications and enhances the overall user experience.
With email validation, you can validate email, password, date, mobile numbers, and many other fields.
JavaScript is your guy if you’re used to validating the form data on the client-side of a web application.
This speeds up the validation process because of faster data processing when compared with server-side validation.
Validation of e-mails in JavaScript steps
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.
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
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:
JavaScript code to validate an email id
To validate emails with JavaScript regular expression, we use the /^\[email protected][a-zA-Z_]+?\.[a-zA-Z]{2,3}$/ regex.
For instance, we write to assign the regex to a pattern.
We use `w+to match any word before [email protected]`.
[a-zA-Z_]+?\.[a-zA-Z]{2,3} matches the hostname part of the email address.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.
Code:
function ValidateEmail(input) {
var validRegex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-][email protected][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”
Examples of JavaScript email validation
Validating an email is highly important when creating forms on websites.
An email address is divided into two parts which are separated using “@” symbol.
Each of these parts consists of a combination of ASCII characters.
The initial part of an email mostly denotes the personal information of a user and consists of the following.
1. Both uppercase (A-Z) as well as lowercase letters (a-z).
2. Numeric Digits (0-9).
3. Special characters like ! # $ % ^ & * _ – = { } | ~.
4. A full stop (It cannot be the first or the last character, moreover, you cannot use a full stop consecutively.)
Besides this, the domain name, which is the part of the email that comes after the @ symbol can consist of letters, digits, hyphens, and dots.
In this JavaScript code, a regular expression /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ is used to validating an email.
Afterward, if/else statements are being used to specify that if the user enters a valid email address.
The user will get an alert message to confirme the authenticity of the email address.
So if the user enters an invalid email address, the alert message will notify the user about it.
Example 1
Email Validation with characters, digits, special characters, @ and dot.
Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<script type=”text/javascript”>
function checkMyMailAddress(HTMLText) {
var validate = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (HTMLText.value.match(validate)) {
alert(“Mail ID format is approved!”);
document.mailForm.mailText.focus();
return true;
} else {
alert(“Mail ID format is not approved!”);
document.mailForm.mailText.focus();
return false;
}
}
</script>
<title>Email Validation</title>
</head>
<body onload=’document.mailForm.mailText.focus()’>
<form name=”mailForm” action=”#”>
Email:<br><input type=’text’ name=’mailText’ /> <input type=”submit”
name=”submit” value=”Validate”
onclick=”checkMyMailAddress(document.mailForm.mailText)” />
</form>
</body>
</html>
Example 2
Email Validation with @ and dot.
Code:
<html>
<body>
<body>
<form name=”form” method=”post” action=”#” onsubmit=”return getMyEmailValidation();”>
Email: <input type=”text” name=”emailAddress”><br/>
<input type=”submit” value=”Check Email”>
</form>
<script>
function getMyEmailValidation()
{
var emailValidation=document.form.emailAddress.value;
var [email protected]=emailValidation.indexOf(“@”);
var indexWithDot=emailValidation.lastIndexOf(“.”);
if ([email protected]<1 || indexWithDot<[email protected]+2 || indexWithDot+2>=emailValidation.length){
alert(“Please make sure email address contains @ and .com”);
return false;
}
}
</script>
</body>
</html>
Example 3
Email Validation with Alphabets, Numbers and Special Characters.
Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Email Validation</title>
<script type=”text/javascript”>
function emailContainAlphabetsSpecialChars() {
var emailValidationRegularExpression = /^[A-Za-z0-9 ]+$/
//Validate TextBox value against the Regex.
var validation = emailValidationRegularExpression.test(document.getElementById(“email”).value);
if (!validation) {
alert(“OK, validation contains Special Characters.”);
} else {
alert(“Not Ok, Does not contain Special Characters.”);
}
return validation;
}
</script>
</head>
<body>
Name:
<input type=”text” />
<br />
<br />
<input type=”button” value=”check Email” onclick=”emailContainAlphabetsSpecialChars()” />
</body>
</html>
Example 4
Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Email Validation</title>
<script type=”text/javascript”>
function emailContainAlphabetsSpecialChars() {
var emailValidationRegularExpression = /\[email protected]\S+\.\S+/;
//Validate TextBox value against the Regex.
var validation = emailValidationRegularExpression.test(document.getElementById(“email”).value);
if (!validation) {
alert(“Not an email address”);
} else {
alert(“Valid email address!”);
}
return validation;
}
</script>
</head>
<body>
Name:
<input type=”text” />
<br />
<br />
<input type=”button” value=”check Email” onclick=”emailContainAlphabetsSpecialChars()” />
</body>
</html>
HTML form to validate an email address
In the HTML code, here is an input field to validate an email.
Code:
<!DOCTYPE html>
<html>
<body onload=’document.form1.text1.focus()’>
<div>
<h3 class=”h3″>Enter your email address</h3>
<form name=”form1″ action=”#”>
<input type=’text’ name=’text1’/>
<br>
<input type=”submit” name=”submit” value=”Submit” onclick=”validateEmail(document.form1.text1)”/>
</form>
</div>
<script src=”email-validation.js”></script>
</body>
</html>
CSS form to validate an email adress
Here is some basic CSS to style HTML elements.
Code:
.h3 {
margin-left: 38px;
}
input {
font-size: 20pX;
}
input:focus, textarea:focus
{
background-color: whitesmoke;
}
input submit {
font-size: 12px;
}
If you’re looking for a great email validation service, you can try Email Inspector for free today. Get your first 100 email addresses checked by a professional and discover how many fake accounts you have on your list!
Comments