jQuery Login Form Shaker

jQuery shake effect is applied to shake an HTML element either vertical or horizontal direction. In some website, we can see this shake effect on invalid login attempt. For implementing this effect we have to use jQuery UI library.

In this tutorial, we are going see how to apply jQuery shake effect on a login form to represent invalid attempts. This effect is created by using the jQuery effect() function. The required library files are,

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

Demo: Click to see the shake effectlogin

In this example, we are sending a login request via AJAX.  It seeks the match between given login credentials and database. If match found then it redirects to the user dashboard. Otherwise, jQuery effect() is applied to a login form to represent invalid login. The code is,

function login() { 
url: "login.php",
type: "POST",
data:  {username:$("#username").val(),password:$("#password").val()},
success: function(data){
if(data) {
window.location.href = "dashboard.php" 
} else {
$("#error").html("Invalid Credentials");
error: function() {} 	        

jQuery Shake Effect

In the above example, the jQuery effect() function is used with some default settings. There are various options to override the default shake effect. These are,

Options Description
direction To specify the direction of the shake effect (vertical or horizontal). Possible values are, left(default), right, up, down.
distance To specify shaking distance.The default is 20.
times Number of shakes. The default is 3.

jQuery Shake Effect with Options

The code to control shake effect with the above options is,

var options = {
distance: '40',
$("#login-form").effect("shake", options, 800);


This jQuery code tutorial was published on September 22, 2014.

↑ Back to Top