Membuat Saringan Data Dengan Javascript
Validasi atau sariangan (dalam bahasa jawa) form berguna untuk menyaring masukan dari user agar tidak merusak konsistensi database. Validasi form juga berguna untuk mencegah sql injection yaitu suatu teknik untuk merusak suatu sistem, biasanya databse dengan perintah-perintah khusus, kalau database ya dengan bahasa SQL. Kenapa bisa begitu ? tentu saja user yang awam atau sok tahu kadang memasukkan karakter aneh, memasukkan bukan pada tempatnya (wah apa ini ?), misalkan yang dibutuhkan angka, tetapi yang dimasukkan adalah huruf.
Ada dua sisi pengecekan, yaitu pada sisi server dan pada sisi client. Dari tingkat kenyamanan user tentu saja lebih enak pada sisi client, karena browser tidak perlu meload halaman, karena menggunakan javascript. Sedang pada sisi server, biasanya menggunanan server side programming kayak ASP,PHP,JSP. Saya pribadi sih lebih suka menggunakan javascript, meski agak susah, tetapi bagi saya yang terpenting adalah kemudahan user.
Pada tutorial ini kita akan menggunakan sedikit javascript dan regular expresion. Aturannya user harus mengisikan sebuah text input dengan angka, dan tidak boleh kosong atau huruf (char). Tanpa ada campur tangan dari PHP maupun ASP.
Ada dua file yang dibutuhkan, 1 HTML dan 1 PHP. HTML digunakan untuk membangun halaman form, sedang PHP digunakan untuk memproses masukan, misalkan ketika anda ingin memasukkan data ke dalam database. Berikut kode HTML
<html>
<head>
<script language=”javascript”>
function validasi(frm){
var obj=document.getElementById(frm);
var salah=0;
var myRegExp=/[\d,\s]/;
var textnya=obj.coba.value;
if (obj.coba.value.length<1){
salah+=1;
msg=”Form harus diisi\n”;
salah+=1;
msg=”Anda harus memasukkan angka\n”;
}
if (salah>0){
alert(msg);
return false;
}
else{
return true;
}
}
</script>
</head>
<body>
Demo validasi form dengan menggunakan javascript. Masukan angka tidak boleh huruf huruf
<form onSubmit=”return validasi(’myfrm’)” id=”myfrm” action=”prc.php” method=”post”>
<input type=”text” name=”coba” />
<input type=”submit” value=”kirim” />
</form>
Powered by <a href=”http://bimoweb.com”>http://bimoweb.com</a>
</body>
</html>
sd
Validasi ini menggunakan sebuah fungsi javascript yaitu validasi (frm) dengan paramter fungsi id dari form. Dengan mendapatkan id form, kita dapat memperoleh semua elemen dalam form tersebut kayak input, select atau textarea. Untuk memudahkan, sebaiknya anda paham konsep OOP, karena javascript, meskipun bahasa pemrograman kecil sudah full OOP.
var myRegExp=/[\d,\s]/;
adalah membuat object regular expresion, caranya agak beda ya, tidak seperti cara pembuatan object yang biasanya. Itu cara yang simpel membuat object regular expression, saya lebih suka membuatnya dengan cara yang seperti itu, karena lebih mudah. Regular expresion ini memiliki maksud form harus diisi DAN harus angka.
Salah=0;
if (!myRegExp.test(textnya)){
salah+=1;
msg=”Anda harus memasukkan angka\n”;
}
adalah proses validasi dengan menggunakan regular expresion yang telah dibuat tadi. Nilai variable salah akan dinaikkan 1 jika regular expresion tadi salah. Nantinya variable salah akan menentukan hasil keluaran dari fungsi ini. Jangan lupa, fungsi ini akan mengembalikan nilai false atau true (boolean).
if (obj.coba.value.length<1){
salah+=1;
msg=”Form harus diisi\n”;
}
adalah cara yang lebih sedernana untuk mengecek apakah form diisi atau tidak. Ini adalah cara alternatif, jika anda kesulitan dengan regular expression, maka bisa menggunakan cara ini. Tetapi kemampuannya juga terbatas, sedang dengan regular expression anda bisa berkreasi lebih banyak dan fleksibel, tapi agak susah.
if (salah>0){
alert(msg);
return false;
}
else{
return true;
}
}
Nah kondisi ini yang menentukan hasil keluaran dari fungsi ini. Jika true maka form tersebut akan di submit dan data dalam form akan dikirim. Sedang jika false maka form tidak jadi di submit. Terus dimana saya harus meletakkan fungsi ini agar bisa dieksekusi ? lihat dibawah ini jawabannya.
<form onSubmit=”return validasi(’myfrm’)” id=”myfrm” action=”prc.php” method=”post”>
<input type=”text” name=”coba” />
<input type=”submit” value=”kirim” />
</form>
Jangan lupa untuk menambah id pada form, kali ini saya memberi id=”myfrm”, ini terserah kok. Atribut action menunjukkan kemana script tersebut jika user men-submit form.
<?php
echo “selamat datang, anda sudah benar memasukkan karakter”;
?>
<a href=”http://bimoweb.com”>http://bimoweb.com</a>
itu adalah isi dari file php. Tidak ada proses tertentu, anda bisa manambahkan proses disini sesuai kebutuhan anda. Yang paling penting validasi yang dilakukan dengan javascript tanpa perlu meload halaman. Jika ada pertanyaan seputar artikel ini bisa hubungi saya di 0856543572158 atau 08179409018 atau anda bisa menggunakan Y.M bimo_hp. Semoga artikel ini membantu
klik disini untuk mendownload source code
Related Post
Filled in category Cerita-Cerita
[…] teks yang mengikuti cursor, tetesan hujan, drag-n-drop, dan lain sebagainya diciptakan dengan Javascript. Website GMail yang bisa menampilkan pesan terbaru tanpa perlu berganti halaman bisa terwujud […]
Saya mau nanya bagaimana memvalidasi pada PHP jika data yang dinput sudah ada didalam database maka muncul tulisan “data already exist”
Bagai mana code PHPnya Tolong BoS!!!