Free Ebook Tutorial from Rosihan Ari's Blog

Tutorial Javascript | Tutorial PHP | Tutorial AJAX | Tutorial CSS | Tutorial FPDF | Tutorial Wordpress | Tutorial Java SE


Ebook yang direkomendasikan untuk Anda
Kunjungi Toko Ebook RosihanAri.Net


Javascript Untuk Validasi Input Hanya Angka Pada Form


September 18th, 2009 | by rosihanari | Cetak Artikel Cetak Artikel


GampSMS SMS Gateway

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 :-(




Share ke Facebook Share ke Twitter
Baca Juga Artikel Terkait
Ide Membuat Pembatasan Jumlah Karakter Pada Form dengan Counter
Script PHP untuk Edit Data dengan Komponen RadioButton pada Form
Script PHP untuk Mencegah Submit Form Berulang Kali
Input Data Ke MySQL Secara Simultan Via Form dengan PHP
Rahasia Dibalik Cara Pembuatan Program Tebak Angka

Kata kunci: javascript form - pemrosesan form - teknik validasi angka form - teknik validasi form - validasi bilangan dengan javascript - validasi bilangan javascript -


Ada 14 komentar dalam artikel ini.



  1. Laksmi says:

    Pak, kok kalo script Anda saya cobakan kok ttp nggak berhslya, soalnya script tsb kan ttp mensubmit walaupun data salah/bukan ?!

    • rosihanari says:

      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.

  2. masiqbal says:

    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 =-.

  3. hartono says:

    gimana cara membuat scip peminjaman, pengembalian dan denda master tolong yaa. tak tunguu.

  4. tya says:

    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?

  5. ayel says:

    Thank’s infonya…

  6. elyastutik says:

    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'])

  7. iyeh says:

    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?

  8. Akbar says:

    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 ^_^

  9. Ardi says:

    Pak Saya mau tnya tentang Script PHP untuk validasi Form:
    Saya pnya Kolom yg isinya Standar Ukur,Hasil Ukur, Koreksi Dan Keterangan.
    Untuk kolom standart ukur itu nilainya udah Fix dan sebagai acuan untuk koreksi.Nantinya user memasukkan hasil nilai ke kolom Hasil Ukur.kemudian setelah disubmit maka program akan mengecek/validasi, jika Hasil Ukur sudah masuk ke nilai Range dari Standart Ukur maka akan ada Ket OK,dan sebaliknya.Gambar jelasnya disini pak..
    [img]http://cdn-u.kaskus.us/71/a7xt74wd.jpg[/img]

  10. dhemas says:

    Pak..Saya mau tanya gmn cara membuat validasi di form jika mau input qty , qty tidak boleh melebihin stok gudang..misal stok ada 2 kemudian user mau input 3 akan muncul validasi itu gmn ya pak…thx

  11. Annisa says:

    saya sudah coba script bapak. pas saya ketik yg bukan angka, muncul alert seperti contoh di atas. setelah itu sya gnti data dengan angka. pas di submit, proses nya malah gak jalan, jadi blank bgtu .
    soalnya di form action saya ada proses simpan. terus gmna yah?

  12. wayan eko says:

    terima kash banyak artikel ini sangat membantu belajar otodidak saya… Semoga bapak tidak bosan2 memposting artikel yang lebih menarik lagi ..

  13. charist49x says:

    maaf gan,hasilnya di print screen dong biar tau hasil dari script anda



 

Komentar/pertanyaan Anda!

Mohon maaf, komentar/pertanyaan yang menggunakan email palsu atau komentar bernada negatif, cemooh, umpatan, cacian atau sejenisnya secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

Mohon maaf jika seandainya ada beberapa pertanyaan Anda yang tidak direspon atau ditanggapi mengingat banyaknya komentar yang masuk dan keterbatasan kemampuan/ilmu saya dalam menjawab pertanyaan satu persatu. Saya harap Anda bisa memahami dan memakluminya.

Semua komentar atau pertanyaan yg masuk tidak akan langsung tampil di halaman ini, karena akan dimoderasi dahulu.


*