It is very useful stuff when we want to setup both login and registration forms at the same place with
that the user can access both the features at once. so i write a simple lesson using jquery & html5.
hope it will use you.
that the user can access both the features at once. so i write a simple lesson using jquery & html5.
hope it will use you.
Step 1
Add the bellow code in index.php bottom of the <BODY> tag. here i used two click events for LOGIN and REGISTER buttons and JQuery validation plugIn.
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('.login').click(function(){
var element=$(this);
var Id=element.attr('id');
$('#lbox').slideDown();
$('#rebox').slideUp();
//to remove the errors and classes while slide change and reset the form
$('label.error').hide();
$('.error').removeClass("error");
//end
});
$('.register').click(function(){
var element=$(this);
var Id=element.attr('id');
$('#lbox').slideUp();
$('#rebox').slideDown();
});
});
</script>
Step 2
Add the CSS code in index.php inside the <HEAD> tag.<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/
site-demos.css">
<style>
body{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:12px;color:#000;}
.submit{background-color:#000; color:#FFF; padding:10px; cursor:pointer;}
.regbtn{ background-color:#000; color:#FFF; padding:10px; cursor:pointer;}
input{ border-radius:5px; background-color:#F3F3F3; -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border:0; padding:5px;}
#wrap{ border:solid #666 1px; padding:5px; width:500px; height:auto;margin:0 auto;}
.login{ text-transform:uppercase; font-size:14px; font-weight:bold;padding:5px;background-color:#F90; width:230px; float:left; margin:5px;cursor:pointer;}
.register{ text-transform:uppercase; font-size:14px; font-weight:bold;background-color:#F00; padding:5px; margin:5px; cursor:pointer;}
#lbox{ width:400px; height:auto; margin:0 auto;}
#rebox{ width:400px; height:auto; margin:0 auto; display:none;}
input{ padding:5px;}
.message{ display:none; width:400px; height:auto; padding:10px;
background-color:#F60;}
label.error{color:#F00; font-size:10px;font-family:Verdana, Geneva, sans-serif;background:none; margin-left:0; padding-left:2px;}
</style>
Step 3
Add the HTML code in index.php inside the <BODY> tag. here take two separate DIV's with separate forms and give the name for it.<div id="wrap">
<h1 class="login" id="login">login</h1>
<h1 class="register" id="register">register</h1>
<div id="lbox">
<div class="message">Login Complete</div>
<form name="form1" id="log" method="post" action="">
<table width="100%" border="0" cellpadding="5" cellspacing="5">
<tr>
<td width="162" height="40" align="right" valign="middle">
User Name :</td>
<td width="203" height="40" valign="middle">
<input type="text" name="uname" id="uname" placeholder="Username">
</td>
</tr>
<tr>
<td height="40" align="right" valign="middle">Password :</td>
<td height="40" valign="middle">
<input type="text" name="password" id="password" placeholder="Password">
</td>
</tr>
<tr>
<td align="right" valign="middle"> </td>
<td valign="middle">
<input name="button" type="submit" class="submit" id="logbtn" value="Login">
</td>
</tr>
</table>
</form>
</div>
<div id="rebox">
<form id="reg" method="post" action="">
<table width="100%" border="0" cellpadding="5" cellspacing="5">
<tr>
<td width="42%" height="40" align="right" valign="middle">User Name :</td>
<td width="58%" height="40" valign="middle">
<input type="text" name="uname" id="uname" placeholder="Username"></td>
</tr>
<tr>
<td height="40" align="right" valign="middle">Passwrod :</td>
<td height="40" valign="middle">
<input type="text" name="password" id="password" placeholder="Password">
</td>
</tr>
<tr>
<td height="40" align="right" valign="middle">Email :</td>
<td height="40" valign="middle">
<input type="text" name="email" id="email" placeholder="Email"></td>
</tr>
<tr>
<td height="40" align="right" valign="middle">Mobile :</td>
<td height="40" valign="middle">
<input type="text" name="mobile" id="mobile" placeholder="Mobile"></td>
</tr>
<tr>
<td height="40" valign="middle"> </td>
<td height="40" valign="middle"><input type="submit" name="reg"
id="reg" class="regbtn" value="Signup"></td>
</tr>
</table>
</form>
</div>
</div>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js">
</script>
<script>
$( "#log" ).validate({
rules: {
uname: {
required: true
},
password: {
required: true
}
}
});
$( "#reg" ).validate({
rules: {
uname: {
required: true
},
password: {
required: true,
minlength:3
},
email: {
required: true,
email:true
},
mobile: {
required: true,
number:true,
maxlength:10
}
}
});
</script>
Live Demo Download Script
No comments :
Post a Comment