loginattemptmain

Form Validation: Limit Login Attempt Using JavaScript.

Hello Friends,

In this blog tutorial, I am going to explain to you how to limit the user login attempt using java script?

Login is a very important function to authenticate the user coming to your website.

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, 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. See the login form image below.

loginatt2

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?

This is a very simple procedure, 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.

loginatt1

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.


In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

dynamicform-javascript

Dynamically Add & Remove Form Fields Using JavaScript

Hi Friends,

In this blog post, I will show you how to add and remove the form fields dynamically using Javascript?

Here I will let you know, how to make prebuilt form field like name email and etc, and just use as per your requirement just by clicking on the field.

Here just click the desired field to keep in your form and your form gets complete. See the below image for the same.

 

dform1



Software needed to build this functionality:

Install NetBeans
Install Xampp Server



How to make these dynamic form fields templates?

This is an easy process, you just need to follow the step by step procedure given below.

Once you installed the above-given software then,

Open your NetBeans IDE and create a project say dynamic_form and then add few files as shown in the below image.

dform2

 

You would also need to create a images folder in the source and then download and keep an image icon of cancel as shown in form earlier to this post.

Once you are done with these files then copy and paste the below code one by one to the respective files.


dynamicform.html:

<!DOCTYPE html>
<html>
<head>
<title>Create Dynamic form Using JavaScript</title>
<script src="dynamicform.js" type="text/javascript"></script>
<link href="dynamicform.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main_content">
<!--
========================================================================================
Header Div.
========================================================================================
-->
<div class="first">
<p><a href="http://www.a5theory.com/"><img src="images/a5logo.png" alt=""/>A5Theory.com
</a></p>
</div>
<!--
======================================================================================
We have multiple buttons here in the div, this will appear on the screen as per user click
=======================================================================================
-->
<div class="two">
<h4>Frequently Used Form Fields</h4><button onclick="nameFunction()">Name</button>
<button onclick="emailFunction()">Email</button>
<button onclick="contactFunction()">Contact</button>
<button onclick="textareaFunction()">Message</button>
<button onclick="resetElements()">Reset</button>
</div>
<!--
========================================================================================
This Div will be used to display your final form
========================================================================================
-->
<div class="three">
<h2>Your Dynamic Form!</h2>
<form action="#" id="mainform" method="get" name="mainform">
<span id="myForm"></span>
<p></p><input type="submit" value="Submit">
</form>
</div>
<!--
========================================================================================
Footer Div.
========================================================================================
-->
<div class="four">
<p><a href="http://www.a5theory.com/"><img src="images/a5logo.png" alt=""/>A5Theory.com
</a></p>
</div>
</div>
</body>
</html>

dynamicform.js:

 

var i = 0; /* Set Global Variable i */
function increment(){
i += 1; /* Function for automatic increment of field's "Name" attribute. */
}
/*
---------------------------------------------

Function for removing the form element
---------------------------------------------

*/
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv){
alert("The parent div cannot be removed.");
}
else if (document.getElementById(childDiv)){
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
}
else{
alert("Child div has already been removed or does not exist.");
return false;
}
}
/*
----------------------------------------------------------------------------

Functions called upon name text field click

----------------------------------------------------------------------------
*/
function nameFunction(){
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Name");
var g = document.createElement("IMG");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon Email text field click.

------------------------------------------------------------------------------
*/
function emailFunction(){
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Email");
var g = document.createElement("IMG");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon contact text field click.

------------------------------------------------------------------------------
*/
function contactFunction(){
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Contact");
var g = document.createElement("IMG");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon textarea field click.
------------------------------------------------------------------------------*/
function textareaFunction(){
var r = document.createElement('span');
var y = document.createElement("TEXTAREA");
var g = document.createElement("IMG");
y.setAttribute("cols", "17");
y.setAttribute("placeholder", "message..");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon Reset field click.
---------------------------------------------------------------------------------*/
function resetElements(){
document.getElementById('myForm').innerHTML = '';
}

dynamicform.css:

body{
width:960px;
margin:45px auto;
background-color:#f9ebe8
}
form{
width:330px;
border-top:1px dotted #D9D9D9;
margin:10px 180px
}
button{
width:246px;
height:40px;
color:#260de2;
margin-bottom:20px;
margin-left:20px;
background-color: lightsalmon;
}
input{
width:280px;
height:40px;
padding:5px;
margin:20px 0 10px;
border-radius:5px;
border:4px solid #acbfa5
}
input[type = submit]{
width:100px;
background-color: #6f6594;
border-radius:5px;
border:2px solid #b7b7c1;
color: #e2d30d;
}
textarea{
width:280px;
height:70px;
padding:5px;
margin:20px 0 10px;
border-radius:5px;
border:4px solid #acbfa5
}
.four p{
text-align:center;
color:#fff;
padding:15px 0
}
.first p{
padding:15px;
color:#fff
}
.two{
background-color:#fff;
width:290px;
float:left;
height:600px
}
.main_content{
width:960px;
height:auto;
background-color:#fff
}
.two h4{
color:#4C4C4C;
text-align:center
}
.three{
text-align:center;
width:660px;
border-left:1px solid #D0D0D0;
float:left;
background-color:#fff;
color: #e2d30d;
}
.four,.first{
width:960px;
clear:both;
background-color:#D3D3D3;
height:55px
}

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

contactus-popup-javascript

Contact Us Popup Form Using JavaScript

Hello Friends,

In this blog post, I am going to explain you, how to make popup contact us form using javascript?

What is popup form?

popup forms are the same form that we usually see but the difference is only in their presentation.

popup forms are visible on any trigger event like a button click or link click.

It saves the space in the page as you can easily settle this button or link in your website or web page.

when user or customer click this link or button then they can use this popup form.

This popup form can be manual and automatic as per your requirement. Here we are explaining the functionality where popup form will be open at button click.

Generally, we can have registration, contact us, payment, subscription popup forms on our website.

Software used to develop this functionality:

NetBeans IDE
Xampp Server



What is the procedure to make this popup form using javascript?

This is a very simple process, you just need to follow the below step by step procedure.

Create a project as contact-popup though you can have any similar name.

Now create few files as shown in the image below.

formpopup


You will also need to download an image(cancel symbol 32X32 png) and keep that image in a images folder that you will create in your source file. You can see the image example in the demo form below at the right corner


Now copy and paste the code given below one by one as in the respective file.

formpopup.html:

<!DOCTYPE html>
<html>
<head>
<title>Popup contact us form</title>
<link href="formpopup.css" rel="stylesheet" type="text/css"/>
<script src="formpopup.js" type="text/javascript"></script>
</head>
<!-- Body start point -->
<body id="body" style="overflow:hidden;">
<div id="headerpop">
<!-- Popup Div Start point -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/cancel.png" onclick ="div_hide()">
<h2>Contact Us</h2>
<hr>
<input id="name" name="name" placeholder="Name" type="text">
<input id="email" name="email" placeholder="Email" type="text">
<textarea id="msg" name="message" placeholder="Message"></textarea>
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>
</div>
<!-- Popup Div End point -->
</div>
<!-- popup display button -->
<h1>Click this buttton below to see the popup form</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body End point -->
</html>

formpopup.js:

// Validating empty form field
function check_empty() {
if (document.getElementById('name').value == "" || document.getElementById('email').value == "" || document.getElementById('msg').value == "") {
alert("Fill All Fields !");
} else {
document.getElementById('form').submit();
alert("Form Submitted Successfully...");
}
}
//popup display function
function div_show() {
document.getElementById('headerpop').style.display = "block";
}
//popup hide function
function div_hide(){
document.getElementById('headerpop').style.display = "none";
}

formpopup.css:

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab');
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/
#headerpop{
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family: 'Zilla Slab', serif;
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#8a6d6d;
}
p {
margin-top:30px
}
h2 {
background-color:#bcc0d6;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
width:82%;
padding:10px;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}
#name {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}
#email {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}
textarea {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:82%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid lightslategray;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px
}
#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:skyblue;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}
span {
color:red;
font-weight:700
}
button {
width:10%;
height:45px;
border-radius:3px;
background-color:skyblue;
color:#fff;
font-family: 'Zilla Slab', serif;
font-size:18px;
cursor:pointer
}

Once you will paste these files into your project then run the html file and you will see the output as shown in the below image.

formpopup1

formpopup2


In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!