It is my first blog where you will learn how to create a Login Form Validation with Shake Effect in HTML CSS & JavaScript.
In HTML, form validation means determining whether or not the user’s entered credential – Email, Username, Password – is valid and correct. The user will not be able to access the restricted page unless he or she enters a valid email address and password. Furthermore, the Shake Effect in this Login Form means that when the user clicks on the login button without entering their email and password, the input boxes shake to inform the user that these fields cannot be left blank.
As shown in the Top Image, Login Form Validation in HTML & JavaScript includes a login form with login text, two input fields, a login button, and so on. Initially, those login errors are not displayed, but when the user clicks on the login button without entering their email and password, these errors with a shake effect appear.
These errors will be hidden automatically once the user begins entering their credentials into the input fields. If you have any questions about what I’m saying, please contact me via email or any social media platform. I am always available.
This login form was created solely for aesthetic purposes, so if you enter a valid email address and password and click the login button, these details will not be sent or submitted anywhere. If you want to send these details anywhere and receive them using PHP, you must include the URL of the PHP file in the action attribute of the form tag. Alternatively, you can use an API to login without reloading the page.
Source Code:
First, you must create three files: HTML, CSS, and JavaScript. After you’ve created these files, simply copy and paste the following codes into your file. You can also download the Login Form’s source files. The link to the download is provided below.
Step One: create an HTML file called index.html and paste the following codes into it. Remember to save your work in a file with the extension ” .html ” or ” .htm “.
<!DOCTYPE html>
<html lang="en">
<!-- By HassanRao - hassanrao.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form in HTML & CSS with validation | HassanRao.com</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 field is Empty!</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 field is Empty!</div>
</div>
<div class="pass-txt"><a href="#">Forgot password?</a></div>
<input type="submit" value="Login">
</form>
<div class="sign-txt">New User? <a href="#">Signup now</a></div>
</div>
<script src="script.js"></script>
</body>
</html>
Step Two: create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember to save the file with the ” .css ” extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #D17117;
}
::selection{
color: #fff;
background: #D17117;
}
.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: #D17117;
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: #D17117;
}
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: #D17117;
}
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: #D17117;
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: #D17117;
cursor: pointer;
border-bottom: 2px solid rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
form input[type="submit"]:hover{
background: #ad5605;
}
Final Step: create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember to save the file with the ” .js ” extension.
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(); //preventing from form submitting
//if email and password is blank then add shake class in it else call specified function
(eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();
(pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();
setTimeout(() => { //remove shake class after 500ms
eField.classList.remove("shake");
pField.classList.remove("shake");
}, 500);
eInput.onkeyup = () => { checkEmail(); } //calling checkEmail function on email input keyup
pInput.onkeyup = () => { checkPass(); } //calling checkPassword function on pass input keyup
function checkEmail() { //checkEmail function
let pattern = /^[^]+@[^]+\.[a-z]{2,3}$/; //pattern for validate email
if (!eInput.value.match(pattern)) { //if pattern not matched then add error and remove valid class
eField.classList.add("error");
eField.classList.remove("valid");
let errorTxt = eField.querySelector(".error-txt");
//if email value is not empty then show please enter valid email else show Email can't be blank
(eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";
} else { //if pattern matched then remove error and add valid class
eField.classList.remove("error");
eField.classList.add("valid");
}
}
function checkPass() { //checkPass function
if (pInput.value == "") { //if pass is empty then add error and remove valid class
pField.classList.add("error");
pField.classList.remove("valid");
} else { //if pass is empty then remove error and add valid class
pField.classList.remove("error");
pField.classList.add("valid");
}
}
//if eField and pField doesn't contains error class that mean user filled details properly
if (!eField.classList.contains("error") && !pField.classList.contains("error")) {
window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag
}
}
You’ve now created a Login Form Validation with HTML, CSS, and JavaScript. Please obtain the source code files from the provided download button if your code doesn’t function or you’ve encountered any errors or problems. You must extract the.zip file that is downloaded for free.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)