<pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Email and Password Validation</title> <link rel="stylesheet" href="css/style.css" /> <link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <header>Signup</header> <form name="form" action="insert.php" method="POST" class="form"> <div class="field email-field"> <div class="input-field"> <input type="email" name="email" placeholder="Enter your email" id="email" class="email" /> </div> class="bx bx-error-circle error-icon" name="password" id="password"> </div> ^__i class="bx bx-error-circle error-icon"> <p class="error-text"> Please enter atleast 8 charatcer with number, symbol, small and capital letter. </p> </div> <div class="field confirm-password"> <div class="input-field"> <input type="password" name="cPassword" placeholder="Confirm password" id="cPassword" class="cPassword" /> ^__i class="bx bx-hide show-hide"> </div> ^__i class="bx bx-error-circle error-icon"> <p class="error-text">Password don't match</p> </div> <div class="input-field button"> <input type="submit" value="Submit Now" /> </div> </form> </div> <!-- JavaScript --> <script> const form = document.querySelector("form"); // Email Validation function checkEmail() { emailField = form.querySelector(".email-field"); emailInput = emailField.querySelector(".email"); const emaiPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; if (!emailInput.value.match(emaiPattern)) { return emailField.classList.add("invalid"); //adding invalid class if email value do not mathced with email pattern }else{ emailField.classList.remove("invalid"); //removing invalid class if email value matched with emaiPattern return true; }} // Hide and show password const eyeIcons = document.querySelectorAll(".show-hide"); eyeIcons.forEach((eyeIcon) => { eyeIcon.addEventListener("click", () => { const pInput = eyeIcon.parentElement.querySelector("input"); //getting parent element of eye icon and selecting the password input if (pInput.type === "password") { eyeIcon.classList.replace("bx-hide", "bx-show"); return (pInput.type = "text"); } eyeIcon.classList.replace("bx-show", "bx-hide"); pInput.type = "password"; }); }); // Password Validation function createPass() { passField = form.querySelector(".create-password"); passInput = passField.querySelector(".password"); const passPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; if (!passInput.value.match(passPattern)) { return passField.classList.add("invalid"); //adding invalid class if password input value do not match with passPattern } passField.classList.remove("invalid"); //removing invalid class if password input value matched with passPattern return true; } // Confirm Password Validtion function confirmPass() { cPassField = form.querySelector(".confirm-password"); cPassInput = cPassField.querySelector(".cPassword"); if (passInput.value !== cPassInput.value || cPassInput.value === "") { return cPassField.classList.add("invalid"); }else{ cPassField.classList.remove("invalid"); return true; }} // Calling Funtion on Form Sumbit form.addEventListener("submit", (e) => { e.preventDefault(); //preventing form submitting checkEmail(); createPass(); confirmPass(); //calling function on key up emailInput.addEventListener("keyup", checkEmail); passInput.addEventListener("keyup", createPass); cPassInput.addEventListener("keyup", confirmPass); if(checkEmail()===true && createPass()===true && confirmPass()===true){ location.href = form.getAttribute("action"); }else{ return false; } }); </script> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)