jQuery Login Form Shaker

jQuery shake effect is applied to shake a 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 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

Download

In this example, we are sending a login request via AJAX.  It seeks 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() { 
$.ajax({
url: "login.php",
type: "POST",
data:  {username:$("#username").val(),password:$("#password").val()},
success: function(data){
if(data) {
window.location.href = "dashboard.php" 
} else {
$("#login-form").effect("shake");
$("#error").html("Invalid Credentials");
}
},
error: function() {} 	        
});
}

jQuery Shake Effect

In the above example, 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 direction of the shake effect (vertical or horizontal). Possible values are, left(default), right, up, down.
distance To specify shaking distance.Default is 20.
times Number of shakes. Default is 3.

jQuery Shake Effect with Options

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

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

Download

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

↑ Back to Top