Validasi Karakter Keyboard dengan JavaScript

Validasi karakter keyboard dengan javascript – Hi bret kali ini saya akan share ke kalian cara validasi inputan karakter keyboard dengan javascript di web html, artinya kalian bisa mengecualikan karakter simbol tertentu yang tidak bisa di inputkan. Misalnya tidak bisa menginput spasi, tanda petik (‘), atau strip ( – ).

Terkadang di dalam membuat aplikasi atau website terdapat form seperti nip atau nama yang tidak boleh memasukkan karakter simbol tertentu, hal ini bertujuan untuk meminimalisir kesalahan di sebuah aplikasi yang kita buat.

Berikut cara membuat Validasi karakter keyboard dengan javascript silahkan kalian lihat tutorialnya.

1. Pertama kalian buat file html dengan nama index.php

<html>
    <title>Form Validasi</title>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <div class="col-md-4">
                <div class="form-group">
                  <label for="namamenu">
                    NIP Pegawai
                  </label>
                  <input type="text" title="Tidak boleh menggunakan spasi" required name="nippegawai" class="form-control" id="id-nip" placeholder="Ketik disini . . .">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="url">Nama Pegawai</label>
                  <input type="text" title="Tidak boleh menggunakan tanda petik ' " required name="namapegawai" class="form-control" id="id-nama" placeholder="Ketik disini . . .">
                </div>
              </div>
              <div class="col-md-6">
                <button type="submit" class="btn btn-primary">
                  <i class="fas fa-save"> </i>
                  Simpan
                </button>
              </div>
        </form>
    </body>
</html>

<script type="text/javascript">
  
    $("#id-nip").on({
    keydown: function(e) {
    if (e.which === 32)
        return false;
    },
    change: function() {
        this.value = this.value.replace(/\s/g, "");
        
    }
    });

    $("#id-nama").on({
    keydown: function(e) {
    if (e.which == 222 || e.which == 221 || e.which == 219 || e.which == 220 || e.which == 187)
        return false;
    },
    });
  </script>

Penjelasan dari code script di atas :

Karena ini adalah fungsi dari jQuery maka kita harus menempatkan library jQuery di dalam <head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Form bagian inputan NIP :

<label for="namamenu"> NIP Pegawai </label>                 
<input type="text" title="Tidak boleh menggunakan spasi" required name="nippegawai" class="form-control" id="id-nip" placeholder="Ketik disini . . .">

Form bagian inputan Nama :

<label for="url">Nama Pegawai</label>                  
<input type="text" title="Tidak boleh menggunakan tanda petik ' " required name="namapegawai" class="form-control" id="id-nama" placeholder="Ketik disini . . .">

dari form inputan tersebut terdapat id (id-nip) & (id-nama) untuk memanggil fungsi di JavaScript.

Berikut Code JavaScript :

Bagian NIP terdapat kode 32 adalah kode nomor spasi keyboard, lalu pada function value.replace adalah fungsi ketika ada spasi di dalam inputan sebelumnya akan otomatis terhapus spasinya

    $("#id-nip").on({
    keydown: function(e) {
    if (e.which === 32)
        return false;
    },
    change: function() {
        this.value = this.value.replace(/\s/g, "");   
    }
    });

Bagian Nama :

 $("#id-nama").on({
    keydown: function(e) {
    if (e.which == 222 || e.which == 221 || e.which == 219 || e.which == 220 || e.which == 187)
        return false;
    },
    });

Nah untuk pengujian tersebut terdapat beberapa kode nomor keyboard yaitu :

222 = ‘
221 = } ]
219 = { [
220 = | \
187 = +

Validasi Karakter Keyboard dengan JavaScript

Kalian dapat melihat kode nomor – nomor tersebut di sini , atau sudah saya tuliskan di bawah ini.

Keyboard key Pressed	JavaScript Key Code value
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
Space	32
page down	34
end	35
home	36
arrow left	37
arrow up	38
arrow right	39
arrow down	40
print screen	44
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
left window key	91
right window key	92
select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
My Computer (multimedia keyboard)	182
My Calculator (multimedia keyboard)	183
semi-colon	186
equal sign	187
comma	188
dash	189
period	190
forward slash	191
open bracket	219
back slash	220
close braket	221
single quote	222

Kesimpulan

Kalian bisa menambahkan notifikasi validasi karakter simbol keyboard apa saja yang tidak boleh di inputkan agar pengguna tidak kebingungan saat menginputkan, atau kalian bisa edit pada title yang terdapat pada form input.

Demikian tutorial Validasi Karakter Keyboard dengan JavaScript semoga bermanfaat bagi kalian, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih.

Selamat mencoba ya :D.