Kita seringkali membutuhkan validasi untuk memastikan data yang masuk kedalam sistem adalah data yang valid atau benar, dan tidak menimbulkan anomali.

Sebenarnya banyak cara yang dilakukan untuk memvalidasi data ini, dari sekian cara tersebut kita bisa menempatkannya di layer-layer yang beragam. Misalnya, kita bisa membuat validasi di sisi server, bisajuga membuat validasi di sisi client atau pada browser.

Validasi Server-side

Validasi yang saya maksud disini adalah validasi yang diterapkan disisi server, untuk mengantisipasi data yang masuk tidak sesuai dengan yang kita harapkan.

Validasi di sisi server penting, karena terkadang meski pun sudah kita beri validasi di sisi client, ada juga user dengan pengetahuan lebih yang iseng-iseng menginjeksi form input yang kita berikan.

Validasi Client-side

Validasi di sisi klien disini yang saya maksud adalah validasi yang kita terapkan di sisi browser klien. Hal yang menarik disini adalah kita tidak memberatkan kerja server, karena kita sudah dapat memvalidasi data tanpa perlu mengirimkan nilai ke server.

Namun, karena kadang-kadang ada user yang menggunakan inspect element misalnya, kita tetap perlu menerapkan validasi sisi server.

Biasanya kita melakukan validasi client-side disini adalah menggunakan html5 bawaan dengan type inputan, atau yang lebih sering dengan menggunakan JavaScript.

Validasi Angka dengan JavaScript

Pada kesempatan kali ini, saya akan membagikan bagaimana cara untuk memvalidasi input yang berupa angka atau number, pada sisi klien, sehingga user tidak diijinkan untuk mengetikkan huruf.

Hal ini diperlukan misalnya kita membuat inputan untuk memasukkan nomor peserta, nomor induk, atau lainnya yang mengharuskan input berupa angka.

Ada banyak cara yang dapat kita gunakan, misalnya dengan menggunakan type number bawaan HTML5, atau dengan menulis kode JavaScript sendiri. Namun menurut saya jika menggunakan type number bawaan html5 kurang menarik karena angka 0 didepan tidak bisa dibaca.

Berikut kode yang dapat digunakan untuk membuat validasi input berupa angka:

Html input:

<input type="text" onkeypress="validate(event)">

Pada kode input text diatas, teman-teman dapat menambahkan class dan id atau yang lainnya, dalam posisi ini, kita hanya menggunakan event onkeypress yang menyatakan setiap kali kita mengetikkan tombol pada input teks tersebut, maka akan memanggil fungsi validate, nah, fungsinya seperti dibawah ini:

Fungsi js validate:

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}	

Fungsi diatas dapat ditambahkan di bawah form dengan menyertakan kode <script>(kode)</script>, atau dengan menggunakan js eksternal.

Sekian untuk posting kali ini, semoga dapat memberikan manfaat. Jika ada pertanyana, jangan sungkan untuk ditanyakan 🙂