Selain dari sisi
Server Side, proses validasi dapat juga dilakukan di sisi
Client Side. Untuk kali ini saya akan coba posting beberapa code yang menggambarkan proses validasi pada form menggunakan Javascript.
Demo dapat dilihat di: You are not allowed to view links.
Register or
LoginPada contoh validasi ini, saya tidak melibatkan eksekusi database, agar dapat memahami proses validasi secara lebih sederhana sebelum bertahap melibatkan eksekusi database, yang Insya Allah akan kita bahas pada kesempatan berikutnya.
Pada Form Login yang dicontohkan ini saya ingin memvalidasi beberapa kondisi:
1. Field Username hanya boleh disikan dengan 5 digit angka saja.
2. Field Username dan Password harus diisi.
Contoh code akan saya bagi menjadi 3 bagian (termasuk css), ada beberapa keterangan yang saya tambahkan disitu. Bila kurang jelas, jangan segan-segan memposting disini.
login.css#login-box {
width:333px;
height: 352px;
padding: 58px 76px 0 76px;
color: #ebebeb;
font: 12px Arial, Helvetica, sans-serif;
background: url(../images/login-box-backg.png) no-repeat left top;
}
#login-box img {
border:none;
}
#login-box h5 {
padding:0;
margin:0;
color: #ebebeb;
font: bold 44px "Calibri", Arial;
}
#login-box-name {
float: left;
display:inline;
width:80px;
text-align: right;
padding: 14px 10px 0 0;
margin:0 0 7px 0;
}
#login-box-field {
float: left;
display:inline;
width:230px;
margin:0;
margin:0 0 7px 0;
}
.form-login {
width: 205px;
padding: 10px 4px 6px 3px;
border: 1px solid #a71000;
background-color:#fff;
font-size: 14px;
color: #000;
}
.login-box-options {
clear:both;
padding-left:87px;
font-size: 11px;
}
.login-box-options a {
color: #ebebeb;
font-size: 11px;
}login.php
<html>
<head>
<script type="text/javascript">
//Prevent user to type non numeric character
//Allowed keystroke are: "0123456789", "TAB" and "BACKSPACE"
function numberonly(e)
{
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode!=8 && unicode!=9)
{
if (unicode<48||unicode>57)
{
return false;
}
}
}
function validateForm()
//The Field should be filled
{
var x=document.forms["login"]["user"].value
if (x==null || x=="")
{
alert("Username must be filled out");
return false;
}
var y=document.forms["login"]["pass"].value
if (y==null || y=="")
{
alert("Password must be filled out");
return false;
}
//prevent user to fill less than 5 digit numeric
var z=document.forms["login"]["user"].value
if(z.length!=5)
{
alert('Username format is not valid, must be 5 digit numeric only');
return false;
}
}
</script>
<link rel="stylesheet" href="css/login.css" type="text/css" media="screen" />
<title>Validation Form Example</title>
</head>
<body>
<div id="login-box">
<H5>Login</H5>
This is a simple Validation Form Example<br />
<form name="login" action="success.php" method="post" onSubmit="return validateForm()">
<div id="login-box-name" style="margin-top:20px;">Username:</div>
<div id="login-box-field" style="margin-top:20px;">
<input name="user" class="form-login" title="Username" value="" size="30" onKeyDown="return numberonly(event);" maxlength="5"/></div>
<div id="login-box-name">Password:</div>
<div id="login-box-field">
<input name="pass" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>
<br />
<br />
<br />
<input type="image" src="images/login-btn.png" name="sublogin" width="103" height="42" style="margin-left:90px;" border="0" alt="Login">
</form>
</div>
</body>
</html>
success.php
<?php
if ($_POST['user'])
{
$user = $_POST['user'];
$pass = $_POST['pas'];
echo "YOU HAVE BEEN LOGGED IN WITH USERNAME $user";
}
?>Semoga berguna, mohon dikoreksi bila ada kesalahan. Thanks
Topic: Validasi Form Login menggunakan Javascript (Read 1347 times)
April 12, 2009, 02:56:11 PM