Membuat Form Validation Dengan Javascript

Dalam sebuah website terkadang kita mengyediakan form, baik berupa form komentar, guest book, pendaftaran, form berlangganan email atau form lainnya. Akan tetapi biasanya beberapa pengguna atau pengunjung terjadi khilaf ( heheh ) namnya juga manusia kadang salah kadang benar, Untuk itu kita perlu memberikan pemberitahuan kepada pengunjung apabila belum mengisi form yang wajib diisi atau salah dalam mengisi form tersebut. untuk itu kita perlu form validasi.

form validasi dengan Javascript menyediakan metode untuk memeriksa masukan informasi sebelum merka mengirimnya. jadi jika kita salah kita akan langsung tau tanpa harus mengirimnya lebih dahulu, dan juga kita dapat melihat dimana kesalahan pengisian kita tersebut.

Baca juga : Cara Membuat Multistep Form Keren Dengan HTML5

1.Membuat Tampilan Form

Sebagai contoh langsung saja ke prakteknya, buatlah sebuah file dengan nama index.html dengan script sebagai berikut :

<html
<head>
<title>Form Validation</title>

<script type="text/javascript">
function validateForm() {
var x=document.forms["daftar"]["nama"].value
if (x==null || x==''){
 alert("Username harus diisi");
 return false;
}
}
</script>

</head>

<body>

<form action="cetak.php" method="post" name="daftar" onsubmit="return validateForm()" enctype="multipart/form-data">

<p>Username : <input name="nama" type="text" /></p>
<p>Email: <input name="email" type="text" /></p>
<p><input name="submit" type="submit" value="Kirim" />
</P>
</form>
</body>
</html>

Jadi apabila anda mengklik submit maka form akan otomatis memanggil function validateForm() untuk melakukan validasi. jadi apbila kita belum memasukan username maka akan muncul alert mesage yang memberitahukan kita bahwa kita belum mengisi username, dan apa bila kita menuliskan format email yang slah maka form juga akan memberikan alert message bahwa alamat email yang di masukan tidak valid.

2. Membuat Tampilan Hasil

Kemudian buatlah sebuah file lagi untuk mencetak isi dari form tersebut apa bila kita benar memasukan formnya. buat sebuah file dengan nama cetak.php.

<?php
$nama = $_POST['nama']; 
$email = $_POST['email']; 

echo '<p>Nama : $nama </p>'; 
echo '<p>Email : $email </p>'; 
echo 'Selamat Datang $nama'; 
?>

Simpan kedua file tersebut dan jalankan lihat apa yang terjadi jika anda belum memasukan username atau memasukan email yang tidak valid.

Form Validation Dengan Javascript anda sekarang sudah selesai, baca juga tutorial program javascript lainnya.