Validasi form dapat dilakukan dengan banyak cara seperti dengan code php, java script atau jquery. Biasanya validasi dengan php dilakukan dengan cara mengirimkan isian form ke file php yang menjadi action dari form. Dengan cara ini biasanya user akan diminta mengisi kembali dari awal jika isian form tidak valid atau belum diisi. Pada tutorial ini, kita akan membuat kode java script yang digunakan untuk menvalidasi form php. Jika form tidak valid atau tidak diisi, maka java script akan menampilkan pesan dan meminta user mengisi form. Dengan cara ini, user tidak harus mengisi form dari awal.
1. Langkah Pertama.
Buat 2 file php, pada tutorial ini saya beri nama form.php dan formaction.php. Pada form.php kita akan membuat 1 form dan java script untuk memvalidasi form tersebut. Sedangkan formaction.php berfungsi sebagai halaman yang menampilkan pesan sukses, jika form telah diisi dengan benar.
2. Langkah Kedua.
Buka file form.php dan masukkan kode html berikut.
<html>
<head>
<title>Validasi Form</title>
</head>
<script language=”javascript”>
function checkinput()
{
var NIM=document.getElementById(“NIM”);
var Nama=document.getElementById(“Nama”);
var Telp=document.getElementById(“Telp”);
var Email=document.getElementById(“Email”);
if ((NIM.value==”") || (Nama.value==”") || (Telp.value==”") || (Email.value==”"))
{
alert (‘Maaf data anda belum lengkap Mohon dilengkapi’);
return false;
}
else
{
return True;
}
}
</script>
<body>
<p><h1>Validasi Form dengan javascript</p>
<form method=”post” action=”formaction.php” onSubmit=’return checkinput()’>
<table border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr><td>NIM</td><td>:</td><td><input type=”text” name=”NIM” id=”NIM”></td></tr>
<tr><td>Nama</td><td>:</td><td><input type=”text” name=”Nama” id=”Nama”></td></tr>
<tr><td>No Telepon</td><td>:</td><td><input type=”Telp” name=”Telp” id=”Telp”></td></tr>
<tr><td>Email</td><td>:</td><td><input type=”email” name=”Email” id=”Email”></td></tr>
<tr><td colspan=”3″ align=”center”><input type=”submit” value=”submit”></td></tr>
</table>
</form>
</body>
</html>
Pada file form.php kita membuat satu form, dengan 4 field yang harus diisi user.
<form method=”post” action=”formaction.php” onSubmit=’return checkinput()’>
Kode diatas berfungsi untuk memanggil fungsi checkinput() ketika user menekan tombol submit.
<script language=”javascript”>
function checkinput()
{
var NIM=document.getElementById(“NIM”);
var Nama=document.getElementById(“Nama”);
var Telp=document.getElementById(“Telp”);
var Email=document.getElementById(“Email”);
if ((NIM.value==”") || (Nama.value==”") || (Telp.value==”") || (Email.value==”"))
{
alert (‘Maaf data anda belum lengkap Mohon dilengkapi’);
return false;
}
else
{
return True;
}
}
</script>
Kode java script diatas berfungsi untuk memeriksa issian user, jika ada salah satu field yang belum diisi maka, kode akan menampilkan pesan error, dan data tersebut tidak akan dikirim ke file formaction.php. jika semua field telah diisi, maka data akan dikirim ke formaction.php.
3. Langkah ketiga
Buka file formaction.php dan masukkan kode berikut
<html>
<head>
<title>Form Action</title>
</head>
<body>
<?php
$NIM=$_POST["NIM"];
$Nama=$_POST["Nama"];
$Telp=$_POST["Telp"];
$Email=$_POST["Email"];
echo “Terima Kasih data anda Telah Kami Terima<br>”;
echo “NIM : $NIM <br> Nama : $Nama<br> Telepon : $Telp<br> Email : $Email<br>”;
?>
</body>
</html>
Pada file formaction.php kita hanya menampilkan data yang telah diisi oleh user pada file form.php.
Tutorial diatas adalah tutorial sederhana untuk memvalidasi form pada php dengan menggunakan java script. Validasi form diatas hanya memeriksa apakah semua field telah diisi, jika ya maka kirim data yang telah diisi ke file formaction.php. Kelemahan dari validasi dengan java script adalah, kode java script tidak akan dijalankan ketika user mematikan fasilitas java script pada browser nya. Atau dengan kata lain, kode validasi tidak akan dijalankan oleh browser.
Pada tutorial selanjutnya, kita akan membahas validasi form lainnya dengan menggunakan jquery..
So stay tuned…..