Hello everyone, let’s dive into a simple and practical coding tutorial today! We’re going to create a Form Validation for Email and Password using HTML, CSS, and JavaScript.
In this guide, we won’t just build a form; we’ll add some handy validation using JavaScript to ensure that the entered email is valid and the password meets certain criteria. Whether you’re new to coding or a seasoned developer, this tutorial provides a straightforward way to enhance your skills and make your forms more user-friendly.
Why Form Validation, you ask? Well, it’s all about creating a seamless user experience by ensuring the data entered is accurate. So, we’ll explore HTML for structuring our form, CSS for styling, and JavaScript for adding that extra layer of validation.
Join me in this coding journey as we work on creating a simple and effective Form Validation for Email and Password. No need for complexity – just practical coding to improve your web projects. Ready to get started? Let’s dive into our Form Validation adventure – the HTML, CSS, and JavaScript way!
HTML :
This is an HTML form for user signup. It includes fields for email, password, and confirm password. The form has validation for email format, password complexity, and password match. If any of the validations fail, an error message is displayed. The user can submit the form by clicking the “Submit Now” button.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Email & Password Validation</title>
<link rel='stylesheet' href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<header>Signup</header>
<form action="#">
<div class="field email-field">
<div class="input-field">
<input type="email" placeholder="Enter your email" class="email" />
</div>
<span class="error email-error">
<i class="bx bx-error-circle error-icon"></i>
<p class="error-text">Please enter a valid email</p>
</span>
</div>
<div class="field create-password">
<div class="input-field">
<input type="password" placeholder="Create password" class="password" />
<i class="bx bx-hide show-hide"></i>
</div>
<span class="error password-error">
<i class="bx bx-error-circle error-icon"></i>
<p class="error-text">
Please enter atleast 8 charatcer with number, symbol, small and
capital letter.
</p>
</span>
</div>
<div class="field confirm-password">
<div class="input-field">
<input type="password" placeholder="Confirm password" class="cPassword" />
<i class="bx bx-hide show-hide"></i>
</div>
<span class="error cPassword-error">
<i class="bx bx-error-circle error-icon"></i>
<p class="error-text">Password don't match</p>
</span>
</div>
<div class="input-field button">
<input type="submit" value="Submit Now" />
</div>
</form>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
This is the CSS styling for the signup form. It sets the font family to “Poppins” from Google Fonts and applies various styles to different elements of the form, such as the container, header, input fields, error messages, and submit button. The styling includes colors, borders, padding, and transitions for a visually appealing and user-friendly design.
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #fff 50%, #bd002f 50%);
}
.container {
position: relative;
max-width: 370px;
width: 100%;
padding: 25px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.container header {
font-size: 22px;
font-weight: 600;
color: #333;
}
.container form {
margin-top: 30px;
}
form .field {
margin-bottom: 20px;
}
form .input-field {
position: relative;
height: 55px;
width: 100%;
}
.input-field input {
height: 100%;
width: 100%;
outline: none;
border: none;
border-radius: 8px;
padding: 0 15px;
border: 1px solid #d1d1d1;
}
.invalid input {
border-color: #d93025;
}
.input-field .show-hide {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #919191;
cursor: pointer;
padding: 3px;
}
.field .error {
display: flex;
align-items: center;
margin-top: 6px;
color: #d93025;
font-size: 13px;
display: none;
}
.invalid .error {
display: flex;
}
.error .error-icon {
margin-right: 6px;
font-size: 15px;
}
.create-password .error {
align-items: flex-start;
}
.create-password .error-icon {
margin-top: 4px;
}
.button {
margin: 25px 0 6px;
}
.button input {
color: #fff;
font-size: 16px;
font-weight: 400;
background-color: #303030;
cursor: pointer;
transition: all 0.3s ease;
}
.button input:hover {
background-color: #111;
}
.button input:active {
transform: scale(0.95);
}
JavaScript:
The provided code is a JavaScript code snippet that handles email and password validation for a signup form. It includes functions to check the validity of the email address, hide and show the password, validate the password strength, and confirm the password. The code also prevents the form from submitting if any of the validation checks fail. If all the validation checks pass, the code redirects the user to the URL specified in the form’s action attribute.
const form = document.querySelector("form"),
emailField = form.querySelector(".email-field"),
emailInput = emailField.querySelector(".email"),
passField = form.querySelector(".create-password"),
passInput = passField.querySelector(".password"),
cPassField = form.querySelector(".confirm-password"),
cPassInput = cPassField.querySelector(".cPassword");
// Email Validtion
function checkEmail() {
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
}
emailField.classList.remove("invalid"); //removing invalid class if email value matched with emaiPattern
}
// 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() {
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
}
// Confirm Password Validtion
function confirmPass() {
if (passInput.value !== cPassInput.value || cPassInput.value === "") {
return cPassField.classList.add("invalid");
}
cPassField.classList.remove("invalid");
}
// 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 (
!emailField.classList.contains("invalid") &&
!passField.classList.contains("invalid") &&
!cPassField.classList.contains("invalid")
) {
location.href = form.getAttribute("action");
}
});
Congratulations! You’ve successfully crafted a Form Validation for Email and Password using HTML, CSS, and JavaScript. This simple and practical tutorial walked you through structuring the form, styling it, and implementing validation. Now equipped with this knowledge, feel free to enhance and apply it to your projects. Happy coding!
Having trouble with your project? No worries! Just click Download, grab the source code, and start your coding journey. Happy coding!
