Penawaran Engine Reservasi Tiket Pesawat

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 -


 

Komentar Anda ...