Form validation with Login attempts module

Form validation with Login attempts – Many students are request to develop form validation with login attempts. So we have to develop the form validation with login attempts and now feel happy share with yours. This is an simple example for create form validation with login attempts, you have to also modify the code and develop your own taste.

Form validation with Login attempts

We are allowed just three login attempts, suppose you have more than three attempts just modify the code then you have successfully made the changes with your requirements.

var attempt = 3; //Variable to count number of attempts
............
attempt --; //Decrementing by one
.............
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}

var attempt = 3; //Variable to count number of attempts

............

attempt --; //Decrementing by one

.............

document.getElementById("username").disabled = true;

document.getElementById("password").disabled = true;

document.getElementById("submit").disabled = true;

return false;

}

Create HTML file (index.html)

Now, we have one HTML form create to fill the user login details and verify the correct data. when user submit button, the javascript function execute to check the login attempts.

<html>
<head>
<title>Javascript Login Form Validation</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here -->
<script src="js/login.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Javascript Login Form Validation</h2>
<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. <b class="valid">User Name : vetbossel<br/>Password : vetripandi</b></span>
</div>
</div>
</body>
</html>

<html>

<head>

<title>Javascript Login Form Validation</title>

</head>

<body>

<h2>Javascript Login Form Validation</h2>

<label>Password :</label>

</form>

<span><b class="note">Note : </b>For this demo use following username and password. <b class="valid">User Name : vetbossel<br/>Password : vetripandi</b></span>

</div>

</body>

</html>

Now create JavaScript file (attepmts.js)

The javascript function automatically executed when the user give the wrong information.

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 == "Formget" && password == "formget#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;
}
}
}

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 == "Formget" && password == "formget#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;

}

Add the CSS file

Finally we have add some css file to integrate with designing level.

/* Below line is used for online Google font */
@import url(https://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
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: 'Raleway', sans-serif;
}
div.main{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px;
}
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%);
}

/* Below line is used for online Google font */

@import url(https://fonts.googleapis.com/css?family=Raleway);

h2{

background-color: #FEFFED;

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: 'Raleway', sans-serif;

}

div.main{

width: 300px;

padding: 10px 50px 25px;

border: 2px solid gray;

border-radius: 10px;

font-family: raleway;

float:left;

margin-top:50px;

}

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%);

}

Form validation with Login attempts

Create HTML file (index.html)

Now create JavaScript file (attepmts.js)

Add the CSS file

Related