Javascript Validasi Huruf Dengan Regular Expression

Javascript validasi huruf adalah suatu teknik untuk mendeteksi tindakan user apakah huruf dari input user telah sesuai dengan prosedur yang ditentukan. Javascript validasi huruf umumnya digunakan dalam form input untuk mengatasi kesalahan input data yang dilakukan oleh pengguna. Karena tidak setiap pengguna mengetahui aturan dalam proses input data maka diberlakukan proses validasi.

Dalam dunia website, validasi form input dapat menggunakan beberapa bahasa seperti PHP, HTML atau javascript. Namun dari setiap bahasa pemrograman website yang paling banyak digunakan untuk fitur validasi adalah javascript karena tidak memerlukan proses loading halaman dan lebih fleksibel.

icaksama validasi javascript regexp

Javascript Validasi Huruf

Kali ini saya akan menunjukan bagaimana cara melakukan validasi karakter/huruf pada suatu inputan form dengan mudah. Disini saya menggunakan javascript dengan memanfaatkan teknik regular expression yang mengontrol tag input pada form. Perhatikan program dibawah ini :

function Validate(){
  var charactersOnly = document.getElementById('name').value;
  if (charactersOnly.search(/^[a-zA-Z]+$/) === -1){
    alert("Only characters");
    document.getElementById('nama').value = "";
  }
}

Program diatas adalah program javascript yang mengontrol tag input yang memiliki id dengan nama name. Coba perhatikan pada bagian kondisi if, dalam bagian tersebut terdapat pemanfaatan teknik regular expression yang digunakan untuk menyeleksi apakah karakter yang diinputkan berupa huruf atau tidak. Jika karakter yang diinputkan tidak berupa huruf maka akan keluar alert/dialog yang berisi tulisan Only characters lalu tag input tersebut akan di set kosong.

Bagaimana bentuk tag input tersebut ?
Program dibawah ini adalah bentuk penulisan tag input.

<input name="nama" id='name' type="text" onkeyup="Validate();" placeholder="Masukan Nama" required="">

Perhatikan pada attribut id yang berisi name, id inilah yang berhubungan dengan javascript dan harus diisi dengan kata yang sama pada bagian document.getElementById(“name”);. Coba perhatikan kembali pada bagian attribut onkeyup, bagian tersebut adalah bagian yang digunakan untuk memanggil/mengeksekusi method Validate() saat sebuah karakter telah diinputkan.

Perlu diingat! biarpun validasi dengan javascript memiliki banyak kemudahan dan fleksibel namun teknik ini sangat rentan dalam segi keamanan karena program javascript yang bersifat client side sehingga sciptnya pun dapat di edit oleh pengguna yang mengetahui program.

Lalu bagaimana mengatasi hal ini ?
Kita harus menggunakan keamanan berlapis dengan memanfaatkan program PHP yang bersifat server side sehingga program tidak bisa di edit oleh pengguna. Untuk tutorial bagaimana validasi menggunakan PHP akan saya bahas dalam tutorial selanjutnya. 🙂

Leave a comment