This segment defines, how you can put shake effect on a form for invalid entry without refreshing page.

 


Here we have done this with  jQuery using .effect() method.

$(selector).effect("shake");

 



We have set “[email protected]” and “fugo”  as user ID and password respectively for our login form. When a user try to enter different user ID or Password , form will shake and an alert message will be shown in form.

Shake effect in jQuery can only be used by including a  js library

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

as shown in below code .


 Just follow the code or download it to use .

add shake effects on form for invalid entry

 


HTML File: login.html


<!DOCTYPE html>
<html>
<head>
<title>Login form - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<!-- Including below JS library is mandatory to use shake effect -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="maindiv">
<!--=========================================================================================
Shake Effect Login Form HTML Starts Here
===========================================================================================-->
<div id="first">
<div id="title">
<h2>Shake Form on Invalid Login</h2>
</div>
<form id="login" name="login">
<h3>Login Form</h3>
<input class="textbox" id="email" name="email" placeholder="Email" type="email">
<input class="textbox" id="password" name="password" placeholder="Password" type="password">
<input id="login_button" type="button" value=" Login ">
<div id="message"></div>
</form>
<div id="last">
Example:<br>
Email : <span>[email protected]</span><br>
Password : <span>fugo</span>
</div>
</div>
</div>
</body>
</html>

 

jQuery File: script.js


$(document).ready(function() {
// Start when document will be ready.
$("#login_button").click(function() {
var email = $("#email").val(); // Store E-mail input value in the variable email.
var password = $("#password").val(); // Store Password input value in the variable password.
/* Check if [email protected] and password=fugo then,Show the message Account Validated!!! in the Div having id message.*/
if (email == "[email protected]" && password == "fugo") {
$("#message").html("Account Validated!!!");
}
/* If E-mail and Password do not match then shake Div having id maindiv and show the message "***Invalid email or password***" in the div having id message.*/
else {
$("#login").effect("shake");
$("#message").html('***Invalid email or password***');
}
});
});

 

CSS File: style.css

Styling various form elements .


@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
/*-------------------------------------------------------
CSS for required elements.
---------------------------------------------------------*/
div#maindiv {
margin:30px auto;
width: 980px;
height: 500px;
background: #Ffffff;
padding-top:20px;
font-family: 'Droid Serif', serif;
font-size:14px;
}
.textbox {
border: 1px solid #c4c4c4;
height: 30px;
width: 250px;
padding:4px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:0px 0px 8px #d9d9d9;
-moz-box-shadow:0px 0px 8px #d9d9d9;
-webkit-box-shadow:0px 0px 8px #d9d9d9;
}
.textbox:focus {
border: 1px solid #7bc1f7;
}
div#message{
color:red;
width:100%;
margin-top:20px;
}
input#login_button {
background-color:#33bdef;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border:1px solid #057fd0;
color:#ffffff;
padding:4px;
margin-top:10px;
}
span {
color:green;
}
#login {
clear:both;
width:400px;
float:left;
border-radius:5px;
box-shadow:0px 0px 8px #123456;
height:280px;
}
#first {
width:60%;
float:left;
text-align:center;
margin-left:100px;
}
#title {
width:400px;
height:70px;
text-shadow:2px 2px 2px #cfcfcf;
margin-top:30px;
font-size:16px;
}
#last {
clear:both;
padding-top:30px;
width:400px;
}

Pabbly Form Builder


Conclusion:

Hence, to provide shake effect we must include js library as shown in html code and need to use .effect(‘shake’) method of jQuery in our code. That will add up an alert effect in form when someone tries to enter invalid log in details.

Keep reading our other blog posts for getting more coding tricks and knowledge.

Recommended blogs –