This JavaScript code provides email and password validation functionality for a web form. It includes functions to validate email and password inputs, display error messages, and handle form submission. The code uses regular expressions to validate the email format and ensures that the password meets certain criteria. When the user submits the form or clicks outside the input fields, the code triggers validation checks and displays appropriate error messages.
This code can be integrated into web applications to enhance the user experience by validating email and password inputs on the client side.
How to Create Email and Password Validation using JavaScript
First, create the HTML form element with an email and password field as follows:
<div class="wrapper"> <div class="form-wrapper"> <h2 class="title">Login to Your Account</h2> <form id="form" class="form"> <div class="form-group"> <label for="name"> Email: </label> <input id="email" type="email" placeholder="someone@gmail.com" required> <p id="emailError"></p> </div> <div class="form-group"> <label for="password"> Password: </label> <input id="password" type="password" placeholder="Enter Password" required> <p id="passwordError"></p> </div> <input type="submit" value="Login"> </form> </div> <div class="success-msg-container"> <h2 id="msg" class="msg">You have provided the correct details and your form will be processed</h2> </div> </div>
Style the login form using the following CSS styles:
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;700&display=swap"); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Roboto Slab", serif; } .wrapper { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-image: linear-gradient( 135deg, rgb(30, 250, 180), rgb(180, 30, 250) ); } .form-wrapper { width: 100%; max-width: 500px; padding: 50px; background-color: white; box-shadow: 0 0 10px rgba(30, 250, 180, 0.4); } .title { margin-bottom: 50px; font-weight: bold; text-align: center; font-size: 2em; color: black; } .form-group { margin: 20px 0; } input { font-size: 30px; padding: 10px 20px; border-radius: 10px; border: none; outline: none; margin: 5px 0; box-sizing: border-box; } label { font-size: 15px; font-weight: bold; } input:not([type="submit"]) { width: 100%; border: 2px solid rgba(0, 0, 0, 0.7); } input[type="submit"] { background-color: rgb(8, 131, 92); color: white; font-size: 20px; } input[type="submit"]:hover { cursor: pointer; background-color: rgb(35, 235, 171); } input[type="submit"]:active { background-color: rgb(28, 80, 63); } .error #emailError, .error #passwordError { color: red; } .error input { border: 2px solid red; } .msg { display: none; }
Finally, add the following JavaScript code into your project to activate the validation function:
const email = document.getElementById("email"); const password = document.getElementById("password"); const form = document.getElementById("form"); const msg = document.getElementById("msg"); // Function to validate the email const validateEmail = (inputEmail)=> inputEmail.value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/); // Function to validate password const validatePassword = (inputPassword) => inputPassword.value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/); // Function used to display errors const generateError = (errorName, errorMsg) =>{ const emailError = document.getElementById("emailError"); const passwordError = document.getElementById("passwordError"); if(errorName == "email"){ emailError.innerText = errorMsg; }else if(errorName == "password"){ passwordError.innerText = errorMsg; } } const formValidate = (inputEmail, inputPassword) =>{ if(!validateEmail(inputEmail)){ emailError = "please enter a valid email address"; generateError("email",emailError); return; } if(!validatePassword(inputPassword)){ passwordError = "please enter correct password"; generateError(generateError("password",passwordError)); return; } } //triggers when user submits the form form.addEventListener("submit",(e) => { e.preventDefault(); formValidate(email, password); }); // Focusout event listener. Triggers when the user clicks anywhere else besides the input email.addEventListener("focusout", (e)=>{ if(!validateEmail(email)){ email.style.borderColor = "red"; generateError("email", "Please enter a valid email"); email.parentElement.classList.add("error"); } }); // Focusout event listener triggers when the user clicks anywhere else besides the input password.addEventListener("focusout", (e)=>{ if(!validatePassword(password)){ password.style.borderColor = "red"; generateError("password", "Please enter a valid password"); password.parentElement.classList.add("error"); } });
That’s all! hopefully, you have successfully integrated this JavaScript form validation function into your project. If you have any questions or suggestions, feel free to comment below.