JQuery Slide Login & Registration Validations | Lessoncup Programming Blog

Monday, 7 October 2013

JQuery Slide Login & Registration Validations

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.



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">&nbsp;</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&nbsp;:</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&nbsp;:</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&nbsp;:</td>
        <td height="40" valign="middle">
<input type="text" name="mobile" id="mobile" placeholder="Mobile"></td>
      </tr>
      <tr>
        <td height="40" valign="middle">&nbsp;</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

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons