Login Form Validation in HTML CSS & JavaScript
In this tutorial, you will learn how to create a fully functional Login Form with Validation using HTML, CSS, and JavaScript. This login form includes real-time error messages and a visual shake effect to alert users when fields are left empty.
What is Form Validation?
Form validation ensures that users provide valid and required data before submitting a form. In our case, the email and password fields must be filled correctly to allow form submission. If either field is left blank or the email format is invalid, the form highlights the issue using an animated shake effect and error messages.
Login Form Features
- Responsive design
- Email and password input fields
- Error messages for blank or invalid inputs
- Shake animation to draw attention to empty fields
- Basic validation using JavaScript
How It Works
When users click the login button without providing an email or password, the form applies a shake effect and displays error messages below the respective fields. Once the user starts typing, these messages disappear automatically if the input is valid.
Making the Form Functional
Currently, the form does not submit any data to a server. If you'd like to process login data, you can integrate the form with a backend script like PHP by specifying the form's
For example:
Required Files
To create this login form with validation, you’ll need three separate files:
- index.html – HTML structure of the form
- style.css – Styling for layout and animation
- script.js – JavaScript logic for form validation
HTML Code for Login Form
Below is the complete HTML structure. Link the external CSS and JavaScript files appropriately:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form Validation</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Login Form</header>
<form action="#">
<div class="field email">
<div class="input-area">
<input type="text" placeholder="Email Address">
<i class="icon fas fa-envelope"></i>
<i class="error error-icon fas fa-exclamation-circle"></i>
</div>
<div class="error error-txt">Email can't be blank</div>
</div>
<div class="field password">
<div class="input-area">
<input type="password" placeholder="Password">
<i class="icon fas fa-lock"></i>
<i class="error error-icon fas fa-exclamation-circle"></i>
</div>
<div class="error error-txt">Password can't be blank</div>
</div>
<div class="pass-txt"><a href="#">Forgot password?</a></div>
<input type="submit" value="Login">
</form>
<div class="sign-txt">Not a member? <a href="#">Signup now</a></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS for Form Validation
This snippets snippet adds styling:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #5372F0;
}
::selection{
color: #fff;
background: #5372F0;
}
.wrapper{
width: 380px;
padding: 40px 30px 50px 30px;
background: #fff;
border-radius: 5px;
text-align: center;
box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
font-size: 35px;
font-weight: 600;
}
.wrapper form{
margin: 40px 0;
}
form .field{
width: 100%;
margin-bottom: 20px;
}
form .field.shake{
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100%{
margin-left: 0px;
}
20%, 80%{
margin-left: -12px;
}
40%, 60%{
margin-left: 12px;
}
}
form .field .input-area{
height: 50px;
width: 100%;
position: relative;
}
form input{
width: 100%;
height: 100%;
outline: none;
padding: 0 45px;
font-size: 18px;
background: none;
caret-color: #5372F0;
border-radius: 5px;
border: 1px solid #bfbfbf;
border-bottom-width: 2px;
transition: all 0.2s ease;
}
form .field input:focus,
form .field.valid input{
border-color: #5372F0;
}
form .field.shake input,
form .field.error input{
border-color: #dc3545;
}
.field .input-area i{
position: absolute;
top: 50%;
font-size: 18px;
pointer-events: none;
transform: translateY(-50%);
}
.input-area .icon{
left: 15px;
color: #bfbfbf;
transition: color 0.2s ease;
}
.input-area .error-icon{
right: 15px;
color: #dc3545;
}
form input:focus ~ .icon,
form .field.valid .icon{
color: #5372F0;
}
form .field.shake input:focus ~ .icon,
form .field.error input:focus ~ .icon{
color: #bfbfbf;
}
form input::placeholder{
color: #bfbfbf;
font-size: 17px;
}
form .field .error-txt{
color: #dc3545;
text-align: left;
margin-top: 5px;
}
form .field .error{
display: none;
}
form .field.shake .error,
form .field.error .error{
display: block;
}
form .pass-txt{
text-align: left;
margin-top: -10px;
}
.wrapper a{
color: #5372F0;
text-decoration: none;
}
.wrapper a:hover{
text-decoration: underline;
}
form input[type="submit"]{
height: 50px;
margin-top: 30px;
color: #fff;
padding: 0;
border: none;
background: #5372F0;
cursor: pointer;
border-bottom: 2px solid rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
form input[type="submit"]:hover{
background: #2c52ed;
}
JavaScript for Form Validation
This JavaScript snippet adds interactive validation with shake animation and error messages:
const form = document.querySelector("form"),
eField = form.querySelector(".email"),
eInput = eField.querySelector("input"),
pField = form.querySelector(".password"),
pInput = pField.querySelector("input");
form.onsubmit = (e) => {
e.preventDefault();
(eInput.value === "") ? eField.classList.add("shake", "error") : checkEmail();
(pInput.value === "") ? pField.classList.add("shake", "error") : checkPass();
setTimeout(() => {
eField.classList.remove("shake");
pField.classList.remove("shake");
}, 500);
eInput.onkeyup = () => checkEmail();
pInput.onkeyup = () => checkPass();
function checkEmail() {
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!eInput.value.match(pattern)) {
eField.classList.add("error");
eField.classList.remove("valid");
let errorTxt = eField.querySelector(".error-txt");
errorTxt.innerText = (eInput.value !== "") ? "Enter a valid email address" : "Email can't be blank";
} else {
eField.classList.remove("error");
eField.classList.add("valid");
}
}
function checkPass() {
if (pInput.value === "") {
pField.classList.add("error");
pField.classList.remove("valid");
} else {
pField.classList.remove("error");
pField.classList.add("valid");
}
}
if (!eField.classList.contains("error") && !pField.classList.contains("error")) {
window.location.href = form.getAttribute("action");
}
};
Demo
Please click the button below to view the demo.
Conclusion
You have now successfully built a responsive and interactive login form with validation using HTML, CSS, and JavaScript. This is a great step towards building more dynamic and user-friendly authentication systems.
