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 
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
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
- Input Data Ke MySQL Secara Simultan Via Form dengan PHP
- Rahasia Dibalik Cara Pembuatan Program Tebak Angka
- Membuat Kode Verifikasi Anti Spam Pada Form dengan JpGraph
- Penggunaan Cookie untuk Mencegah Submit Ganda pada Polling
- Memproses Input Komponen Check Box di PHP
- Script PHP untuk Mengedit Data Via Form
Share this article on:
Kata kunci: javascript form - pemrosesan form - teknik validasi angka form - teknik validasi form - validasi bilangan dengan javascript - validasi bilangan javascript -
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'])
Assalamualaikum,,
contoh javascript diataskan berupa javascipt angka? kalau berupa karakter (huruf saja) gimana tuh mas?
Misalkan kita input nama mahasiswa, nama itu berupa huruf saja.
Mudah2n mas bisa paham dengan pertanyaan saya?
saya mau nanya dong soal validasi..
misalnya saya ingin memvalidasi 2 buah inputan tempat dan tanggal lahir..
nahh supaya hanya keluar 1 validasi gimana ya pengaturan html dan script nya??
soalnya ketika saya input kosong muncul 2 validasi yaitu setelah textbox tempat dan tanggal..
bagaimana supaya hanya muncul 1 validasi setelah tanggal bila salah satu ataupun kedua inputan kosong…
mohon bantuannya ya segera kirim ke pethruck_x_60@yahoo.co.id
atw rep dsini bila ada yg bisa membantu..
terima kasih ^_^