Dikesempatan kali ini saya akan share membuat Slide Form Login dan Registrasi menggunakan jquery dan jquery validate untuk memvalidasi inputannya..
Ok berikut scriptnya
css dab javascriptnya dalam satu file html..(Sumber : ibacor)
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><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:#797474; color:#FFF; width:230px; float:left; margin:5px; cursor:pointer;}
.register{ text-transform:uppercase; font-size:14px; font-weight:bold; background-color:#454141; color:#FFF; 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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script><script>
$(document).ready(function(){
$('.login').click(function(){
var element=$(this);
var Id=element.attr('id');
$('#lbox').slideDown(); $('#rebox').slideUp();
$('label.error').hide(); $('.error').removeClass("error");
});
$('.register').click(function(){
var element=$(this);
var Id=element.attr('id');
$('#lbox').slideUp(); $('#rebox').slideDown();
});
});
</script>
</head>
<body>
<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></body></html>
0 Komentar untuk "Membuat Slide Form Login & Registrasi"