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