How to Create an Email Validation Form in JavaScript

Submitted by razormist on Monday, May 22, 2023 - 22:40.

How to Create an Email Validation Form in JavaScript

Introduction

In this tutorial we will create a How to Create an Email Validation Form in JavaScript. This tutorial purpose is to teach you on how to validate your email address. This will cover all the important functionality that allow you to validate the email you enter in the form. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system or application if you want to add some email validation. I will give my best to provide you the easiest way of creating this program Email Validation. So let's do the coding.

Before we get started:

Here is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will only display html form and buttons. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width ,initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
<body>
	<head>
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
			</div>
		</nav>
	</head>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Create an Email Validation Form</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-8">
			<div id="result"></div>
		</div>
		<div class="col-md-4">
			<form>
				<div class="form-group">
					<label>Enter your email:</label>
					<input type="text" class="form-control" id="email" />
				</div>
				<button type="button" class="btn btn-primary btn-block" onclick="validateEmail();">Validate Email</button>
			</form>
		</div>
 
	</div>
<script src="script.js"></script>	
</body>	
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will validate the email address you entered when you click the button. To do this just copy and write these block of codes inside the text editor and save it as script.js.

function validateEmail(){
	let email=document.getElementById('email').value;
 
	if(email==""){
		alert("Please enter something first!");
	}else{
		let emailValidate=/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
		if(emailValidate.test(email)){
			document.getElementById('result').innerHTML="<center><h2 class='text-success'>Email Validated</h2></center>";
		}else{
			document.getElementById('result').innerHTML="<center><h2 class='text-danger'>This email is not validate</h2></center>";
		}
	}	
}

In the code provided we just simple create one method called validateEmail(), this function will validate the email you just entered. This function uses a special regex that will validate the characters you enter in email form. We then use the JavaScript function test() to check if the email you enter can be validated.

Output:

The How to Create an Email Validation Form in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Create an Email Validation Form in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

342 views

How to Create an Email Validation Form in JavaScript