Email Validation Using Html,Css and Javascript

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/

 

 

 

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top