TODAY WE ARE GOING TO MAKING A EMAIL VALIDATION USING HTML CSS AND JAVASCRIPT ……
1.IN THIS NOW FIRST OF ALL WE CREATING SOME FORM WITH USING HTML —>>>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>email validation</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<div class="image">
<img src="./photo-1533090161767-e6ffed986c88.avif" alt="">
</div>
<div class="main">
<div class="container">
<form action="#">
<div>
<label for="email" id="form-label">Email</label>
<input type="text" id="form-input" onkeyup="myFunction()"></div>
<span id="form-error"></span>
<span class="logo"><i class="fa-regular fa-circle-check"></i></span>
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
2. IN THIS SECTION WE WILL USE SOME CSS TO STYLE OUR FORM OF EMAIL VALIDATION AND GIVE SOME CLASSES WHICH WE WILL ADD TO GIVE TRANSITION IN JS —>>>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
overflow-y: hidden;
}
.image{
z-index: 1;
height:100vh;
width: 100%;
opacity: 0.9;
background-repeat: no-repeat;
}
.main{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
position: absolute;
}
div{
display: block;
}
.container{
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 84rem;
margin-right: 8rem;
}
#form-error{
color: black;
font-size: 1rem;
}
.logo{
color: green;
display: none;
}
.logonone{
display: contents;
}
#form-label{
font-size: 1rem;
color: black;
}
#form-input{
border: 0;
border-bottom: 2px solid black;
font-size: 20px;
outline: none;
background: transparent;
margin: -1px 0px 0px 0px ;
transition: 0.3s;
}
3. NOW IN THIRD STEP WE WIL ADD SOME JAVASCRIPT TO GIVE OUR EMAIL VALIDATION TO A FUNCTION—->>
let downtext = document.getElementById("form-input");//blank space
let downlabel = document.getElementById("form-label");//email text
let downerror = document.getElementById("form-error");//error message
let logo = document.querySelector(".logo");
function myFunction(){
downtext.style.margin ="10px 0px 0px 0px";
if(!downtext.value.match(/^[A-Za-z\._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)
){
downerror.innerHTML ="please enter a valid email";
downtext.style.borderBottomColor = "red";
return false;
}else
downerror.innerHTML = "";
logo.classList.add("logonone");
downtext.style.borderBottomColor = "green";
return true;
}
downerror .style.color ="red";
THIS IS LIVE DEMO –>> https://codewithjod.github.io/emailValidation/