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/