April 22, 2014 3:54 pm

How to shake login form on invalid entry using jQuery UI

In this tutorial I am going to give you a very simple jQuery code using that you can make your web interactive and look more attractive. In this tutorial you can learn to shake login box if user put wrong data like email and password it will shake login box left to right, In this tutorial I am  jQuery UI to create this shake effect.

How to shake login form on invalid entry using jQuery UI

[wpdm_file id=98]DEMO

jQuery to create shake effect:

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

<script>
$( "#button" ).click(function() {
    var email = $("#email").val();
    var password = $("#password").val();
    if (email == "[email protected]" && password == "test") {
	$("#message").html("Account Validated!!!");
    }
    else{
	$( "#toggle" ).effect( "shake" );
	$("#message").html("Invalid email or password.");
    }
});
</script>

This above code will check email and password with static values if matched then no effect else it will shake box and display invalid email or password message.

We used “shake” effect but there is many effect like bounce, slide, fade and scale etc you can find complete effects here.

All together: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>shake demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 400px;
    background: #ccc;
    text-align: center;
  }
  </style>
  <style type="text/css">
input[type=email]
{
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  width:200px;
  min-height: 28px;
  padding: 4px 20px 4px 8px;
  font-size: 12px;
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}
input[type=password]
{
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  width:200px;
  min-height: 28px;
  padding: 4px 20px 4px 8px;
  font-size: 12px;
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}
</style> 
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 

<div id="toggle">
    <br>
	<div id="message"></div>
	<br>
    
	<p><input id="email" name="email" type="email" required="required" placeholder="Email"></p>
	<p><input id="password" name="password" type="password" required="required" placeholder="Password">
	
	<p><input type="button" id="button" value=" Login " /></p>
	
	<br>
	    <br>
		<p>Valid email: <strong>[email protected]</strong></p>
		<p>Valid password: <strong>test</strong></p>
    
</div>
 
<script>
$( "#button" ).click(function() {
    var email = $("#email").val();
    var password = $("#password").val();
    if (email == "[email protected]" && password == "test") {
	$("#message").html("Account Validated!!!");
    }
    else{
	$( "#toggle" ).effect( "shake" );
	$("#message").html("Invalid email or password.");
    }
});
</script>
 
</body>
</html>

This complete code is working sample copied from our demo page.

[wpdm_file id=98]DEMO

That’s all for today download code and a demo available check our demo before use and please don’t forget to comment you feedback and do share with friends.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

4 responses to “How to shake login form on invalid entry using jQuery UI”

  1. sadath hussain says:

    Really amazing shake login page in PHP…Thank you for sharing this ….

  2. siddhu says:

    Nice Code

  3. huzoorbux says:

    I have added static data in jQuery you can post that data to server and on server response do your actions.

  4. sanjay says:

    amazing…

Leave a Reply

Your email address will not be published. Required fields are marked *