Tuesday, October 8, 2013
Shake the Form on Wrong Username and Password
Hiiii, it always looks great if you put many animations or effects on your site and even visitor gets a good impression about your site and for a developer too.
Approximately all of you had developed many login system and even you have worked on many CMS like Wordpress,Joomla and Drupal. Those who have worked on Wordpress must have seen the shaking of login form for Admin section when you enter a wrong username or password.
That shaing of form looks attarctive rather than simple Login form.
So, here in this post I'll be teaching you how to shake the login form or any other form of your choice on some wrongly entered data fields like wrong username or password, etc.
CODE BEGINS :
effect.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mycodestock</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mycodestock</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#form_div { width: 240px; height: 160px; padding: 0.4em; position: relative; }
#form_div h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
body {
font-size: 62.5%;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
</style>
#button { padding: .5em 1em; text-decoration: none; }
#form_div { width: 240px; height: 160px; padding: 0.4em; position: relative; }
#form_div h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
body {
font-size: 62.5%;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
rules: {
username: "required",
password: {
required: true,
},
},
messages: {
username: "Please specify your name",
password: "Enter The password",
},
submitHandler: function()
{
var senddata=$("#myform").serialize();
$.ajax({
url: 'post.php',
data:senddata,
type:'POST',
success: function(data,textStatus){
rules: {
username: "required",
password: {
required: true,
},
},
messages: {
username: "Please specify your name",
password: "Enter The password",
},
submitHandler: function()
{
var senddata=$("#myform").serialize();
$.ajax({
url: 'post.php',
data:senddata,
type:'POST',
success: function(data,textStatus){
var vdata = jQuery.parseJSON(data);
if(vdata.error)
{
function runEffect() {
if(vdata.error)
{
function runEffect() {
var selectedEffect = $( "#effectTypes" ).val(); // get effect type from
$( "#form_div" ).effect( selectedEffect, 500, callback ); // run the effect
};
};
function callback() { // callback function to bring a hidden box back
setTimeout(function() {
$( "#form_div" ).removeAttr( "style" );
}, 1000 );
};
setTimeout(function() {
$( "#form_div" ).removeAttr( "style" );
}, 1000 );
};
$("#error_label").html('<strong>'+vdata.message+'</strong>');
runEffect();
return false;
}
else
{
$("#error_label").html('<strong>'+vdata.message+'</strong>');
}
}
});
}
});
});
</script>
</head>
<body>
<div align="center" >
<div>
<div id="form_div">
<h3>Form</h3>
<p id="error_label"></p>
</br>
<form id="myform">
<input type="text" name="username" placeholder="Username">
<input type="text" name="password" placeholder="Password">
</br>
<!--input type="submit" id="button" value="Submit"-->
<input type="hidden" value="shake" id="effectTypes">
<input type="submit" value="submit">
</form>
</div>
</div>
</div>
</body>
</html>
runEffect();
return false;
}
else
{
$("#error_label").html('<strong>'+vdata.message+'</strong>');
}
}
});
}
});
});
</script>
</head>
<body>
<div align="center" >
<div>
<div id="form_div">
<h3>Form</h3>
<p id="error_label"></p>
</br>
<form id="myform">
<input type="text" name="username" placeholder="Username">
<input type="text" name="password" placeholder="Password">
</br>
<!--input type="submit" id="button" value="Submit"-->
<input type="hidden" value="shake" id="effectTypes">
<input type="submit" value="submit">
</form>
</div>
</div>
</div>
</body>
</html>
post.php :
<?php
if($_POST)
{
if($_POST['username']=="admin")
{
if($_POST['password']=="admin")
{
echo '{"error":"","message":"You are logged in"}';
}
else
{
echo '{"error":"password_wrong","message":"Password mismatch"}';
}
}
else
{
echo '{"error":"username_wrong","message":"username mismatch"}';
}
}
?>
if($_POST)
{
if($_POST['username']=="admin")
{
if($_POST['password']=="admin")
{
echo '{"error":"","message":"You are logged in"}';
}
else
{
echo '{"error":"password_wrong","message":"Password mismatch"}';
}
}
else
{
echo '{"error":"username_wrong","message":"username mismatch"}';
}
}
?>
Put both of the above files in a same folder and run.
Hope you like this post……..Please Comment…………!!!!!!!!!
Tags: HTML , Javascript/Jquery
Subscribe to:
Post Comments (Atom)
0 Responses to “Shake the Form on Wrong Username and Password”
Post a Comment