Hello Friends,
In this blog tutorial, I am going to explain to you how to limit the user login attempt using java script or to make a form validation?
Login is a very important function to authenticate the user coming to your website generally achieved by form validation.
Login window helps in authenticating the users who try to make login to your website or service and allows only authorized users to come inside their account.
Here we are going to show you the functionality of the login attempt or form validation, Using login attempt you can set a limit to make the login try for the users.
Here you will make a login form which will provide the 3 Login attempt to the user and if a user could not make a successful login this 3 attempt then the text box for username and password will automatically be disabled for the user and then the user can not make any further try with the login panel as form validation will not allow to user to make any further login. See the login form image below.
this login attempt functionality stops the unauthenticated users, as they can try to make login again and again with a different set of user name and password to make an authentic login.
So this functionality reduces the hacking probability of your login account.
Software Used:
Install NetBeans.
Install Xampp Server.
What is the procedure to limit the user login attempt or form validation?
This is a very simple procedure of form validation, you just need to follow the step by step procedure given below.
Start your Apache server using Xampp Control Panel.
Open your NetBeans IDE.
Create a project with a suitable name like login attempt.
Now Create the files as shown in the below image inside your project.
Copy and paste the below code one by one in the respective files.
loginattempt.html:
<html>
<head>
<title>Javascript Login Form Validation</title>
<!-- Include CSS File Here -->
<link href="loginattempt.css" rel="stylesheet" type="text/css"/>
<!-- Include JS File Here -->
<script src="loginattempt.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Javascript Login Form Validation</h2>
<h3 style="text-align: center;">Limit Login Attempt</h3>
<form id="form_id" method="post" name="myform"><label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<input type="button" value="Login" id="submit" onclick="validate()"/>
</form>
<span><b class="note">Note : </b>For this demo use following username and password. <br/><b class="valid">User Name : a5theory<br/>Password : 123</b></span>
</div>
</div>
</body>
</html>loginattemp.js:
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "a5theory" && password == "123"){
alert ("Login successfully");
window.location = "success.html"; // Redirecting to other page.
return false;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}loginattempt.css:
/* Below line is used for online Google font */
@import url('https://fonts.googleapis.com/css?family=Rasa');
h2{
background-color: rgba(132, 164, 197, 0.54);
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Rasa', serif;
}
div.main{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px;
margin-left: 244px;
background-color: #55b3d8;
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center{
font-size:32px;
}
.note{
color:red;
}
.valid{
color:green;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}Once you are done with copy and paste the code just run the project(run html file)and see the live demo of the login attempt functionality or form validation.
In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.
Hope! you would have enjoyed this post of form validation.
Please feel free to give your important feedbacks in the comment section below.
Have a great time! Sayonara!