Teknik Validasi Form Mengguanakan JQuery Validate

Assalamualaikum,

Sudah Cukup lama saya tidak update Blog kesayangan saya ini, maklum lagi banyak kerjaan, oke langsung saja, pembahsan kali ini tidak ada sangkut pautnya dengan database, namun berkutat pada sekitar Form. Suatu Form mungkin kelihatannya remeh, hanya sebagai tempat input data, namun anda pasti tahu bahwasanya tidak semua orang pengungjung website kita / User aplikasi yang kita buat selalu mengisi Form dengan benar. Ada yang tidak sengaja menguinputkan salah, atau malah ada yang sengaja disalah salahin (Mungkin Iseng :D), nah sebagai Seorang Programmaer kita harus dapat mengantisipasinya.

Q:Apakah validasi itu penting?
A:ya sangat pengting, untuk menjaga validitas data, semisal, data dalam database anda beri type data integer lalu si user menginput khan string(huruf abjad), maka otomatis database akan menolak inputan tersebut, dan jika tidak di handling maka akan terjadi error.

validasi 1

Sebenarnya Validasi dapat menggunakan PHP, namun itu sudah usang, karena PHP bekerja dari sisi Server, kita akan menggunakan Jquery. untuk Penjelasn Jquery bisa anda searching di google 😛

Pertama kita buat file index.php (bisa menggunakan FIle index yg lama jika anda mengikuti tutorial sebelumnya)
lalu ketikan script berikut

<html>

<head>
<title>Form Input</title>
<script src=”js/jquery-1.9.1.js”></script>
<script src=”js/jquery-validate-1.10.0.js”></script>
<script>
$(function () {
$(“#FORM1”).validate({
rules:
{
NAMA:
{
required: true
},
JURUSAN:
{
required: true
},
EMAIL:
{
required: true,
email : true
},
HP :
{
required: true,
number : true

}

},
messages: {
NAMA:
{
required: “Nama belum terisi”
},
JURUSAN:
{
required: “Jurusan belum terisi”
},
EMAIL:
{
required: “Email belum terisi”,
email :”Format email belum benar”
},
HP:
{
required : “Hp belum terisi”,
number : “harus diisi dengan angka”
}

}
})
});
</script>

</head>

<body>

<?php

include “koneksi.php”;

if(isset($_POST[SAVE])){

$nama = $_POST[NAMA];
$jurusan = $_POST[JURUSAN];
$email = $_POST[EMAIL];

//print_r($_POST);

$sql = “INSERT INTO mahasiswa SET nama = ‘$nama’,
jurusan = ‘$jurusan’,
email = ‘$email'”;

$input = mysql_query($sql) or die(‘error’.mysql_error());

if($input){

echo “Data Berhasil Diinput”;

}else{

echo “Data Belum Berhasil Diinput”;

}

}

?>

<form method=”POST” action=”input.php” id=”FORM1″>
Nama : <input type=”text” name=”NAMA” id=”NAMA” placeholder=”Inputkan Nama”><br>
Jurusan : <input type=”text” name=”JURUSAN” placeholder=”Inputkan Jurusan”><br>
Email : <input type=”text” name=”EMAIL” placeholder=”Inputkan Email”><br>
Phone : <input type=”text” name=”HP” placeholder=”Inputkan No Hp”><br>
<input type=”Submit” name=”SAVE” value=”SAVE”><br>

</form>

</body>

</html>

Jika sudah anda dapat jalankan di localhost, jika dalam keadan kosong dan anda menekan SAVE maka tampilah akan seperti ini

validasi 1

validasi 2

Dengan adanya Jquery Validation diharapkan user dapat menginput kan data dengan lebih benar dan tidak semaunya sendiri. 🙂

Oh ya yg mau tanya-tanya monggo di komen aja,
yang mau coba secara langsung, silahan download disini

Oke Semoga Bermanfaat

Wassalamualaikum..

Ingin mendapat uang jajan tambahan dengan menulis Blog, Klik Disni




Leave a Reply

Your email address will not be published. Required fields are marked *