Javascript Untuk Validasi Input Hanya Angka Pada Form

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

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

1.status = true;

Trus.. kita cek karakter pertama yaitu ’1′. Karena ’1′ termasuk karakter 0 s/d 9 maka nilainya TRUE

1.status = status AND true = true AND true = true;

Kita cek karakter kedua ’3′. Karena ’3′ termasuk karakter 0 s/d 9 maka nilainya TRUE

1.status = status AND true = true AND true = true;

Karakter ketiga ‘a’. Karena ‘a’ tidak termasuk karakter 0 s/d 9 maka nilainya FALSE

1.status = status AND false = true AND false = false;

Karakter keempat, nilainya TRUE

1.status = status AND true = fakse AND true = false;

Karakter kelima, nilainya TRUE

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





view sourceprint?



1.var x = document.form1.data.value;


diganti dengan





view sourceprint?



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

INFO4U

Jumat, 11 Mei 2012

Javascript Untuk Validasi Input Hanya Angka Pada Form

Share to your friends

SATRION

Newsletter

INFO4U

Jumat, 11 Mei 2012

Javascript Untuk Validasi Input Hanya Angka Pada Form

Share to your friends

Artikel Terkait

SATRION

Newsletter