PT Mitra Tekno Niaga
Hubungi Kami
x
Cara Membuat Validasi Inputan Wajib Angka dengan JavaScript
Pemrograman

15 Oktober 2019

Cara Membuat Validasi Inputan Wajib Angka dengan JavaScript

Hallo sobat mitra tekno niaga, pada tulisan kali ini Kami ingin memberikan tutorial sederhana tentang bagaimana cara membuat sebuah validasi inputan wajib menggunakan Angka. Tahukah kamu? validasi ini sifatnya sangatlah penting, karena untuk menghindari terjadi kesalahan ketik oleh user atau pengguna aplikasi. Jika informasi yang di input user salah, sudah dipastikan data yang di simpan ke dalam aplikasi tidak valid.

Data inputan yang harus menerapkan validasi ini antara lain: Nomor KTP, Nomor SIM, Nomor Handphone dan lain-lain. Yuk, mari baca dan simak tutorial ini sampai habis.

Membuat Validasi Angka

Untuk membuat validasi ini, Anda harus membuat sebuah function seperti berikut ini:

function validation(){
  var validasiAngka = /^[0-9]+$/;
  var tahunLahir = document.getElementById("tahun");
  if (tahunLahir.value.match(validasiAngka)) {
      alert("Tahun kelahiran Anda adalah " + tahunLahir.value);
  } else {
      alert("Masukkan tahun kelahiran Anda!nFormat wajib angka!");
      tahunLahir.value="";
      tahunLahir.focus();
      return false;
  }
}

Penjelasan:
Baris ke-1 : Buka dan deklarasi nama function
Baris ke-2 : Deklarasi variable validasiAngka, berisi ReGex (Regular Expression) Angka.
Baris ke-3 : Deklarasi variable tahunLahir, berisi value dari element input.
Baris ke-4 : Mulai kondisi dengan formula validasi yaitu:
Jika tahunLahir mengandung Angka.
Baris ke-5 : Jika sesuai dengan formula kondisi maka alert dengan pesan “Tahun kelahiran Anda adalah (value dari element input)” akan muncul.
Baris ke-6 : else, pengecualian.
Baris ke-7 : Jika tidak sesuai dengan formula kondisi maka alert dengan pesan “Masukkan tahun kelahiran Anda! Format wajib angka!” akan muncul.
Baris ke-8 : Kosongkan atau reset element input.
Baris ke-9 : Memberikan fokus indikator pada element input.
Baris ke-10: Menahan agar tidak masuk ke proses selanjutnya.
Baris ke-11: Tutup kondisi
Baris ke-12: Tutup function

Mudah kan?

Baca Juga: Membuat Validasi Input Email Tidak Valid dengan JavaScript

Untuk melakukan testing sudah Kami sertakan full source code-nya dibawah ini, Anda cukup copy paste script tersebut di komputer Anda masing-masing.

<html>
<head>
<script type="text/javascript">
function validation(){
  var validasiAngka = /^[0-9]+$/;
  var tahunLahir = document.getElementById("tahun");
  if (tahunLahir.value.match(validasiAngka)) {
      alert("Tahun kelahiran Anda adalah " + tahunLahir.value);
  } else {
      alert("Masukkan tahun kelahiran Anda!nFormat wajib angka!");
      tahunLahir.value="";
      tahunLahir.focus();
      return false;
  }
}
</script>
</head>
<body>

Tahun Kelahiran:<br>
<input type="text" id="tahun">
<button onclick="validation()"> cek </button>

</body>
</html>

Demikian pembahasan tentang Cara Membuat Validasi Inputan Wajib Angka dengan JavaScript, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih

JavaScript HTML