Pertama di Indonesia: "Murottal Al Qur'an + Terjemahan" dalam bentuk CD MP3 Original (Javascript Untuk Validasi Input Hanya Angka Pada Form
September 18th, 2009 | by rosihanari |
Cetak Artikel Ini
Siang tadi, salah satu member saya (mbak Laksmi) sedang dilanda kebingungan. Sistem atau aplikasi yang dia buat akan mengalami error bila input yang diterima oleh script dari sebuah form diisi dengan data yang bukan berupa angka. Oleh karena itu, dia ingin bagaimana cara melakukan validasi input supaya menolak proses submit bila ada komponen input form yang diisi value yang bukan berupa angka. Dengan kata lain… proses submit akan dilakukan jika value yang dimasukkan benar-benar berupa angka.
OK.. mbak Laksmi, ini dia artikel yang akan membahas hal tersebut. Mudah-mudahan bisa menjadi solusi. Kalaupun belum menjadi solusi sepenuhnya, silakan dikembangkan sendiri ya. Saya hanya ngasih ide dan cara dasarnya alias kailnya saja, sedangkan ikannya silakan dicari sendiri ya 
Memang agak sulit untuk memvalidasi value yang diinputkan ke form apakah dia termasuk angka/bilangan atau bukan oleh Javascript. Hal ini dikarenakan semua value akan dianggap sebagai suatu string oleh Javascript. Oleh karena itu kita pakai cara lain untuk memvalidasinya.
Ide dasar untuk memvalidasi suatu string input berupa angka atau bukan adalah dengan mengecek satu demi satu karakter atau digitnya. Tentu kita tahu bahwa value input berupa angka atau numerik jika setiap digit karakternya terdiri dari angka-angka 0, 1, 2, …, 9. Dengan kata lain, jika string itu memuat karakter selain angka-angka itu berarti dia bukan angka sepenuhnya.
Contoh:
string 12345 : berupa angka
string 1234a34 : bukan berupa angka (karena memuat huruf ‘a’)
string 123-182p : bukan berupa angka (karena memuat ‘-’ dan ‘p’)
Nah… sekarang kita akan menerapkan ide tersebut untuk memvalidasi input apakah dia termasuk angka atau bukan.
Trus.. caranya mengimplementasikan bagaimana? Seperti yang telah saya sampaikan di atas, kita akan mengecek satu demi satu karakternya. Langkah pertama, kita berhusnuzon dulu pada stringnya bahwa dia termasuk angka, di sini kita set status = true (status = true maksudnya string tsb merupakan angka). Lalu kita mulai bekerja untuk setiap digit karakternya. Apabila karakternya termasuk karakter 0 s/d 9, maka kita beri nilai karakternya TRUE, sedangkan bila tidak termasuk karakter 0 s/d 9 maka kita beri nilai karakternya FALSE. Nilai karakter ini selanjutnya kita kenakan operasi AND dengan status menjadi status yang baru
status = status AND nilaikarakter;
Proses ini dilanjutkan sampai dengan karakter terakhir dari stringnya. Bila nilai status terakhir adalah TRUE maka berarti semua karakter termasuk karakter 0 s/d 9. Sedangkan bila nilai status akhirnya adalah FALSE maka berarti ada karakter dalam string yang tidak termasuk karakter 0 s/d 9 sehingga kita simpulkan string tersebut bukan angka.
OK… sebagai contoh misalkan kita punya string ‘13a56′.
Pertama status kita set TRUE terlebih dahulu.
status = true;
Trus.. kita cek karakter pertama yaitu ‘1′. Karena ‘1′ termasuk karakter 0 s/d 9 maka nilainya TRUE
status = status AND true = true AND true = true;
Kita cek karakter kedua ‘3′. Karena ‘3′ termasuk karakter 0 s/d 9 maka nilainya TRUE
status = status AND true = true AND true = true;
Karakter ketiga ‘a’. Karena ‘a’ tidak termasuk karakter 0 s/d 9 maka nilainya FALSE
status = status AND false = true AND false = false;
Karakter keempat, nilainya TRUE
status = status AND true = fakse AND true = false;
Karakter kelima, nilainya TRUE
status = status AND true = false AND true = false;
Dengan demikian nilai akhir status adalah FALSE. Jadi kesimpulannya adalah ‘13a56′ bukan angka. Simpel bukan idenya?
Nah sekarang kita terapkan ide ini ke Javascript. Untuk membuat daftar karakter 0 s/d 9 kita buat array berisi karakter ‘0′ s/d ‘9′.
Ini dia scriptnya untuk memvalidasi input berupa angka.
<html>
<head>
<script type="text/javascript">
function cekNumerik()
{
// membaca nilai dari input form (komponen bernama 'data'), dan disimpan sebagai x
var x = document.form1.data.value;
// membuat daftar karakter '0' s/d '9' dalam array
var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
// nilai awal status
var status = true;
// proses pengecekan setiap karakter dalam string
// looping dilakukan sebanyak jumlah karakter dalam string
for (i=0; i<=x.length-1; i++)
{
// jika karakter ke-i termasuk dalam array, maka nilainya TRUE
// sedang jika tidak, nilai FALSE
if (x[i] in list) cek = true;
else cek = false;
// kenakan operasi AND
status = status && cek;
}
if (status == false)
{
// jika status akhir bernilai FALSE maka munculkan kotak peringatan
// dan akan mengembalikan nilai FALSE
alert("Bukan angka");
return false;
}
else
{
// sedang jika nilai status akhir TRUE, maka akan mengembalikan nilai TRUE
return true;
}
}
</script>
</head>
<body>
<form name="form1" method="post" onsubmit="return cekNumerik()" action="scriptAnda">
Input <input type="text" name="data"> <input type="submit" name="submit" value="Submit">
</form>
</body>
</html>Perhatikan bagian tag HTML pada form di atas. Di situ terdapat event onsubmit="return cekNumerik()". Event tersebut akan dijalankan ketika user mengklik tombol submit. Proses submit akan diteruskan ke bagian action ’scriptAnda’ jika nilai cekNumerik() yang berasal dari javascript bernilai TRUE (input string nya berupa angka). Sedangkan bila nilai cekNumerik() bernilai FALSE (inputnya bukan angka) maka akan muncul pesan alert dan proses submit tidak akan dilanjutkan ke ’scriptAnda’.
Begitu mbak laksmi, mudah-mudahan bisa memahaminya ya…. Mudah-mudahan pula bisa bermanfaat bagi pengunjung blog yang lain.
Update:
Maaf bagi para pengguna IE, mohon untuk baris
var x = document.form1.data.value;
diganti dengan
var x = document.form1.data.value.split("");
Hal ini dikarenakan membaca karakter demi karakter dari stringnya tidak bisa dilakukan di IE dengan cara pertama di atas. Terpaksa harus dipecah dulu dengan split(""); Hmmm… aneh benar nih IE 
Beberapa artikel terkait
- Alternatif Script Untuk Memproses Input Data Form Dinamis
- Script PHP untuk Mencegah Submit Form Berulang Kali
- Ide Membuat Pembatasan Jumlah Karakter Pada Form dengan Counter
- Script PHP untuk Edit Data dengan Komponen RadioButton pada Form
- Rahasia Dibalik Cara Pembuatan Program Tebak Angka
- Input Data Ke MySQL Secara Simultan Via Form dengan PHP
- Penggunaan Cookie untuk Mencegah Submit Ganda pada Polling
- Membuat Kode Verifikasi Anti Spam Pada Form dengan JpGraph
- Teknik Memvalidasi Input Tanggal dengan PHP
- Memproses Input Komponen Check Box di PHP
Share this article on:
Kata kunci: javascript form - pemrosesan form - teknik validasi angka form - teknik validasi form - validasi bilangan dengan javascript - validasi bilangan javascript -
Rosihan Ari adalah seorang programmer, penulis buku, trainer, peneliti dan berusaha menjadi seorang blogger sejati dengan memberikan yang terbaik buat negeri ini. Berfokus pada computer programming serta computer aided learning for mathematics, ia ingin berbagi ilmu yang dimilikinya. 
Loading ...
Pak, kok kalo script Anda saya cobakan kok ttp nggak berhslya, soalnya script tsb kan ttp mensubmit walaupun data salah/bukan ?!
to laksmi: coba dicek lagi mbak, mungkin ada yang masih salah. Saya coba script di atas, gak ada masalah. Begitu data yang dimasukkan bukan angka, dia gak bisa disubmit. Silakan dicoba dulu script di atas, dipelajari, dan jangan langsung dipakai pada project anda kalau masih belum jelas.
walopun komentar saya ga nyambung sama postingan, ijinkan saya untuk mengucapkan :
Taqobballallahu minna wa minkum, Syiamana wa syiamakum,
Ja’alanallahu wa iyyakum, Minal aidin wal faizin
Selamat Hari Raya Idul Fitri 1430 H
Mohon maaf lahir dan bathin, maapin segala salah dan khilafku selama ini ya…
.-= masiqbal´s last blog ..Lebaran =-.
gimana cara membuat scip peminjaman, pengembalian dan denda master tolong yaa. tak tunguu.
it works! thx alot ya mas^^
tapi mas, kalau di dalam form terdapat beberapa input text, misalnya nip, no telfon, kode pos, dll, gimana ya?
Thank’s infonya…
coba pk kode kayak gini lebih singkat : !preg_match(“/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+/”,$_POST['email'])
itu validasi untuk email
sedangkan ini validasi untuk no telp
!preg_match(“/^([0-9])+/”,$_POST['telp'])