Cara Mengatur Form Input Hanya Diisi Angka Saja

Bagaimana caranya agar sebuah inputan tertentu pada formulir/form website dapat diatur agar hanya boleh diisi oleh karakter angka saja ? dan bagaimana pula membatasi jumlah maxmimal dan minimal inputan yang boleh dimasukan.

Pertanyaan ini tentunya berkaitan erat dengan yang namanya validasi sebuah form dari sisi user. Karena kita ketahui sendiri bahwasanya secara umum teknik validasi untuk formulir (form) sendiri terdiri dari dua bagian, yaitu validasi dari sisi user (sebelum data dikirim) dan validasi saat data dikirim (saat diproses untuk disimpan ke database server). Validasi ini tentunya sangat penting sekali agar kita bisa mendapatkan data yang benar atau sesuai dengan keinginan. Selain itu hal ini sebenarnya juga dimaksudkan agar user tidak mengisi data formulir seenaknya sendiri.

Disini teknik validasi yang saya gunakan adalah menggunakan Javascript, nanti kita buat sebuah function pada Javascript kemudian fungsi tersebut diletakan di inputan yang hanya boleh diisi dengan angka saja.

#1 Bagaimana caranya agar sebuah inputan tertentu pada formulir/form website dapat diatur agar hanya boleh diisi oleh karakter angka saja ?

Membuat Fungsi Javascript

Pertama kita buat dulu sebuah function menggunakan Javascript yang bertugas untuk memvalidasi nilai input yang dimasukan oleh user

Contoh :

<script type="text/javascript">
function Angkasaja(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>

Memanggil Fungsinya dan meletakannya pada form

Langkah selanjutnya adalah memanggil fungsi tersebut pada nilai inputan yang hanya boleh diisi menggunakan karakter angka saja

Contoh :

<input type="text" onkeypress="return Angkasaja(event)"/>

Jadi nanti kode secara keseluruhan bisa diimplementasikan seperti berikut :

<html>
<head>
<title>Input Data Hanya Angka - Nyimak PHP</title>
</head>
<body>
<h1>Mengatur Input Form Hanya Boleh Diisi Angka Saja</h1>
<form action="" method="POST">
<input type="text" onkeypress="return Angkasaja(event)"/>
<input type="submit" name="submit" value="Kirim">
</form>
<script type="text/javascript">
function Angkasaja(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
</body>
</html>

#2. Bagaimana pula membatasi jumlah maxmimal dan minimal inputan angka yang boleh dimasukan ?

Anda bisa menambahkan maxlength dan minlength pada inputan angka yang disediakan.
Misalnya jika inputan angka tersebut adalah untuk Nomor HP maka, nanti bisa Anda isi pada maxlengthnya 12 dan minlengthnya misal 11

Contoh :

<input type="text" maxlength="12" minlength="11" onkeypress="return Angkasaja(event)"/>

Sampai disini kia telah berhasil membuat form input yang hanya boleh diisi oleh karakter angka saja.Teknik validasinya mungkin akan berbeda lagi terutama saat data dikirim ke database server misal menggunakan script PHP.