Hello friends, In this tutorial, we will learn how to validate an EMAIL using HTML, CSS, and JavaScript.
what is an Email?
Email stands for Electronic MAIL is the exchange of computer-stored messages from one user to another with the help of the internet. Emails are a fast and inexpensive way to communicate for business or personal use.
An EMAIL validation is a process of checking whether the user’s entered EMAIL is a valid or invalid. If the user enters the invalid EMAIL then the warning message will be displayed to the user as “you entered invalid EMAIL”.
Why do we validate an EMAIL?
In our day-to-day lives, everyone is using EMAIL for communication from one person to another due to its benefits like speed and inexpensive. so there is a need to validate the EMAIL.
HAVE A LOOK AT THIS:
https://coderspacket.com/posts/phone-number-validation-using-javascript/
To understand this implementation, read the below HTML, CSS, and JavaScript codes.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<title>Email Validation</title>
</head>
<body>
<div class=" background text-center p-5">
<h1 class="text-primary"> Email Validation</h1>
<form name="Form" onsubmit="return validateEmail()" class="p-5">
Email: <input type="text" name="Email" value="" placeholder="Enter your email here"><br><br>
<span id="warning" class="text-danger"></span>
<br><br>
<input type="submit" value="SUBMIT">
</form>
</div>
</body>
</html>
<style>
.background{
background-color: #f1f815;
background-image: linear-gradient(90deg, #ebff14 0%, #0debff 100%);
height: 100vh;
}
</style>
<script>
function validateEmail(){
var userEnteredEmail=document.Form.Email.value;
if(userEnteredEmail.indexOf('@')<=0){
document.getElementById("warning").innerHTML="** Invalid email, please enter valid email**";//invalid @ position
return false;
}
if ((userEnteredEmail.charAt(userEnteredEmail.length-4)!='.') && (userEnteredEmail.charAt(userEnteredEmail.length-3)!='.')){
document.getElementById("warning").innerHTML="** Invalid email, please enter valid email **";// invalid "." position
return false;
}
}
</script>
OUTPUT:
