Mengatur Form Input Hanya Boleh Diisi Angka Saja

Validasi form menggunakan Javascript. Hanya Angka saja yang boleh di input dengan jumlah maksimal dan minimal tertentu

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 seenak jidatnya.

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 - ROOT93.CO.ID</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 input form hanya boleh diisisi oleh karakter angka saja.Teknik validasinya mungkin akan berbeda lagi teutama saat data dikirim ke database server misal menggunakan script PHP.