Hey friends, today in this blog you will learn How To Create Simple Login Form Validation Using HTML CSS & JavaScript. In the previous blog, I explained Advanced Login Form Validation Using HTML CSS & JavaScript and now it’s time to validate the login form using JavaScript.
What is Validation Login Page?
The validation of the HTML form consists in verifying that the identification information entered by the user – E-mail, Username, Password is valid and correct or not. The user will not have access to the reserved page until they enter a valid email and password. And, The shaking effect in this login form means that when the user clicks on the login button without entering the email and password, the input boxes shake to inform the user that these fields are not, they can be empty.
Introduction Of Our Validation Login Page.
In our login validation form in HTML and Js, as you can see in the preview image, there is a login form that contains the login text, two input fields, a connection, etc. . At first, these login errors are not displayed, but when the user clicks the login button without entering the email and password, these errors are displayed with a jerking effect.
You Might Like this Blog:
- How to create Login Signup Page Using Simple HTML & CSS.
- How to create an HTML CSS animated sidebar navigation menu.
- Create A Mobile Responsive Chat Box
- Login Signup Page Using Advanced CSS And HTML.
To Create Simple Login Form Validation Using HTML CSS & JavaScript follow these steps:
Step 1
Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample
create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Form Validation using Javascript</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="form"> <div class="title"> Login To CodeWithNepal </div> <form method="post" action="successpage.html" onsubmit="return validation();"> <div class="input_wrap"> <label for="input_text">Email or Username</label> <div class="input_field"> <input type="text" class="input" id="input_text"> </div> </div> <div class="input_wrap"> <label for="input_password">Password</label> <div class="input_field"> <input type="password" class="input" id="input_password"> </div> </div> <div class="input_wrap"> <span class="error_msg">Incorrect username or password. Please try again</span> <input type="submit" id="login_btn" class="btn disabled" value="Login" disabled="true"> </div> </form> </div> </div> <script src="script.js"></script> </body> </html>
Step 2
And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.
@import url('https://fonts.googleapis.com/css2?family=Jost:[email protected];700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
outline: none;
color: #290474;
}
body{
background: linear-gradient(to right, #617ff4, #6760f1);
}
.wrapper{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.form{
width: 425px;
height: auto;
background: #fff;
padding: 35px 50px;
border-radius: 2px;
}
.form .title{
text-align: center;
margin-bottom: 20px;
font-weight: 700;
font-size: 24px;
}
.form .input_wrap{
margin-bottom: 20px;
width: 325px;
position: relative;
}
.form .input_wrap:last-child{
margin-bottom: 0;
}
.form .input_wrap label{
display: block;
margin-bottom: 5px;
}
.form .input_wrap input{
padding: 15px;
width: 100%;
border: 1px solid transparent;
font-size: 16px;
border-radius: 3px;
}
.form .input_wrap .input{
background: #f5f4f4;
padding-right: 35px;
}
.form .input_wrap .input:focus{
border-color: #1dbf73;
}
.form .input_wrap .input_field{
position: relative;
}
.form .input_wrap .btn{
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
}
.form .input_wrap .btn.disabled{
background: #727272;
}
.form .input_wrap .btn.enabled{
background: #1dbf73;
cursor: pointer;
}
.form .input_wrap .error_msg{
font-size: 15px;
margin-bottom: 5px;
color: #512cd6;
display: none;
}
Step 3
Last, create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with a .js extension.
function validation(){
var input_text = document.querySelector("#input_text");
var input_password = document.querySelector("#input_password");
var error_msg = document.querySelector(".error_msg");
if(input_text.value.length <= 3 || input_password.value.length <= 3 ){
error_msg.style.display = "inline-block";
input_text.style.border = "1px solid #f74040";
input_password.style.border = "1px solid #f74040";
return false;
}
else{
alert("form submitted successfully")
return true;
}
}
var input_fields = document.querySelectorAll(".input");
var login_btn = document.querySelector("#login_btn");
input_fields.forEach(function(input_item){
input_item.addEventListener("input", function(){
if(input_item.value.length > 3){
login_btn.disabled = false;
login_btn.className = "btn enabled"
}
})
})Output
