Memvalidasi Form Input hanya Angka dengan JavaScript

 

Membuat Inputan Hanya Angka Dengan Javascript – Selamat datang di artikel saya masih dalam pembahasan tentang tutorial javascript kali ini kita akanmembahas tentang cara membuat form inputan yang hanya memungkinkan untuk menginput angka. artinya hanya angka saja yang bisa di ketik pada form ini. jika user mengetikkan huruf atau karakter lain, maka tidak akan berfungsi atau yang di input tidak akan muncul pada form input. jadi pada form yang akan kita buat ini adalah form yang hanya mau menampung angka saja.

baiklah teman-teman silahkan teman-teman simak tutorial cara membuat inputan hanya angka dengan javascript berikut ini.

Membuat Inputan Hanya Angka Dengan Javascript

Terkadang di dalam membuat sebuah aplikasi atau website, kita diharuskan untuk membuat form input yang hanya memperbolehkan untuk menginput angka. hal ini bertujuan untuk meminimalisir kesalahan di dalam sebuah aplikasi yang kita buat. untuk cara membuat validasi angka dengan javascript silahkan teman-teman perhatikan pada penjelasan berikut.

Buat sebuah file html atau php terserah teman-teman. di sini saya menyediakan sebuah file dengan nama angka.html. di mana di file ini akan kita buat validasi angka atau membuat validasi hanya angka dengan javascript. Pertama kita akan membuat sebuah form dulu teman-teman.

angka.html

       

coba teman-teman perhatikan pada contoh syntax membuat form input angka di atas.

pertama kita buat dulu sebuah form biasa.

input type="text" onkeypress="return hanyaAngka(event)"

tapi di form ini kita memberikan event . untuk membuat aksi pada saat form ini di ketikkan atau di input. coba teman-tema baca juga tutorial saya sebelumnya tentang http://www.plimbi.com/article/175267/tutorial-event-pada-javascript. untuk menambah pemahaman lebih pada event javascript. jadi pada saat terjadi pengetikan pada form ini, maka akan di jalankan function hanyaAngka().

 

sekalian mereturn nilai dari fungsi ini.

selanjutnya teman-teman perhatikan pada function hanyaAngka().

function hanyaAngka(evt) {

    var charCode = (evt.which) ? evt.which : event.keyCode

    if (charCode > 31 && (charCode < 48 || charCode > 57))

 

    return false;

    return true;

}

di sini kita melakukan pengecekan jika yang di input adalah angka, maka akan mengembalikan nilai true pada form.

if (charCode > 31 && (charCode < 48 || charCode > 57))

sekarang coba jalankan pada browser

      

Nah  jika kalian mengetikkan angka maka akan muncul seperti tampilan di atas namun jika kalian mengetikkan huruf apapun pada form input tersebut maka huruf tersebut akan tervalidasi alias tidak akan muncul pada form tersebut.

Bagaimana Membuat Batas maksimal digit angka yang di masukkan ?

Untuk membuat maksima angka yang di masukkan teman-teman tinggal menambahkan atribut maxlength pada element form tersebut. contohnya.

input type="text" maxlength="2" onkeypress="return hanyaAngka(event)"

nah, pada contoh di atas berarti kita hanya memperbolehkan 2 digit angka yang di input. selanjutnya tidak akan bisa terketik pada form.

Oke teman-teman cukup sekian dulu tutorial Membuat Inputan Hanya Angka Dengan Javascript. semoga dapat bermanfaat. selamat mencoba.