Mengatur Form Input Hanya Boleh Diisi Angka Saja


 Mengatur Input Form 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.


Related Posts :

1 Response to "Mengatur Form Input Hanya Boleh Diisi Angka Saja"

  1. Sangat membantu sekali mas bagi yang awam terutama saya. Jadi paham sdikit demi sedikit deh kode javascript

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...