Cara menggunakan validasi angka di javascript

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:

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 [kode], atau dengan menggunakan js eksternal.

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

Jangan pernah menganggap aman apa yang di inputkan oleh user, kurang lebih begitulah pernyataan yang disampaikan jika ingin membuat sebuah aplikasi yang baik. karna kita tidak tau apakah yang di inputkan oleh user sudah benar atau salah. belum lagi kalau apa yang di input bisa membahayakan aplikasi, misalnya yang seharusnya inputan text pada kolom komentar malah disisipi script XSS attack yang membahayakan aplikasi, tentu hal ini bisa sangat fatal akibat nya.

ada banyak jenis validasi yang bisa dimanfaatkan untuk meminimalisir bahaya yang sudah saya sebutkan diatas, tapi secara garis besar kita akan membaginya menjadi 2 bagian yang itu validasi di sisi client dan validasi di sisi server.

pada artikel ini, saya akan fokus membahas validasi di sisi client terlebih dahulu menggunakan fitur HTML 5 dan javascript. dalam artikel ini anggaplah anda disuruh untuk membuat sebuah halaman web formulir pendaftaran siswa baru. kita tidak ingin user yang melakukan pendaftaran bisa melakukan pendaftaran dengan data kosong, sehingga kita perlu melakukan validasi setiap inputan yang diberikan.

Membuat Halaman Form Pendaftaran

sekarang silahkan buat sebuah file html baru dengan nama pendafaran.htm dan ketiklah script berikut :

    Belajar Form Validation
    


    

        
            

                Nama
                
            
            

                Email
                
                Email Akan Digunakan Untuk Mengirimkan Notifikasi.
            
            

                Jurusan
                
                        Pilih Jurusan
                        Jurusan Informatika
                        Jurusan Teknik Komputer Jaringan
                        Jurusan Multimedia
                    
            
            Submit
        
    

sekarang silahkan buka file pendaftaran.html menggunakan web browser, makan akan muncul halaman seperti ini :

sampai tahap ini kita hanya mempersiapkan form saja, belum termasuk dengan validasi.

Validasi Form Dengan Menggunakan HTML 5

sebenarnya kita juga bisa memanfaatkan fitur dari HTML untuk melakukan validasi sederhana seperti validasi type inputan, jumlah karakter, textbox tidak boleh kosong dan validasi lainya. sekarang kita akan melakuka modifikasi dengan menambahkan script validasi dengan HTML.

silahkan modifikasi textbox untuk nama menjadi seperti dibawah ini

sekarang jika anda klik submit akan akan muncul validasinya, atribute reqired mencegah agar textbox tidak kosong ketika form disubmit, sedangkan maxlength memberikan batasan karakter yang bisa di input dan minxlengt sebaliknya.

Validasi Form Dengan Javacript

selain melakukan validasi dengan HTML, kita juga bisa memanfaatkan javascript sebagai kombinasi untuk melakukan validasi, kita akan melakukan sedikit perbaikan sebagai berikut

    Belajar Form Validation
    




    

        
            

                Nama
                
            
            

                Email
                
                Email Akan Digunakan Untuk Mengirimkan Notifikasi.
            
            

                Jurusan
                
                        Pilih Jurusan
                        Jurusan Informatika
                        Jurusan Teknik Komputer Jaringan
                        Jurusan Multimedia
                    
            
            Submit
        
    
    
        function validateForm[] {
            if [document.forms["formPendaftaran"]["nama"].value == ""] {
                alert["Nama Tidak Boleh Kosong"];
                document.forms["formPendaftaran"]["nama"].focus[];
                return false;
            }
            if [document.forms["formPendaftaran"]["email"].value == ""] {
                alert["Email Tidak Boleh Kosong"];
                document.forms["formPendaftaran"]["email"].focus[];
                return false;
            }
            if [document.forms["formPendaftaran"]["jurusan"].selectedIndex < 1] {
                alert["Pilih Jurusan."];
                document.forms["formPendaftaran"]["jurusan"].focus[];
                return false;
            }
        }
    

lalu silahkan save untuk menyimpan perubahan, sekarang coba kosongkan textbox email dan klik button maka akan muncul alert box seperti gambar dibawah ini yang memberi info bahwa textbox tersebut tidak boleh kosong dan menunjutkan posisi textbox yang dimaksud dengan method .focus dari perintah javascript.

namun salah satu kelemahan validasi di sisi client masih bisa diakali dengan memodifiasi script melalui inspect element pada browser sehingga menyebabkan validasi tidak berjalan sebagaimana mestinya. oleh karena itu dibutuhkan juga validasi pada server side yang akan kita pelajari pada artikel selanjutnya.

Video Tutorial Validasi Form Dengan HTML Dan Javascript

Nuris Akbar SST, M.Kom

Senior Backend Web Developer Dengan Pengalaman Lebih Dari 8 Tahun, Sekarang Menjadi CTO Di Startup Globalvillage, Founder Academy Diigtal Dan Instruktur Training Di PT Brainamtics Cipta Informatika.

Baca Artikel Terkain Menarik Lain: