Validasi Form Menggunakan Regex Pada HTML

previous Previous Page

Validasi form diperlukan untuk menghindari masukan input yang salah dari pengguna. Pengguna dapat memasukkan nilai apapun kedalam suatu inputan form. Misalnya inputan nama lengkap dapat diisikan dengan karakter selain huruf. Bisa jadi pengguna memasukkan angka, tanda baca ataupun karakter non-printable seperti tabulasi, dan cariage return (enter) melalui proses copy paste yang seharusnya berupa huruf. Dan hal ini tentunya sangat mengganggu.

Anda dapat melalukan kontrol terhadap input yang dimasukkan pengguna hanya dengan menggunakan regex. Regex berfungsi untuk mengenali pola karakter pada kumpulan huruf yang nantinya akan dikenali oleh fungsi regex tersebut dan jika pola yang dimasukkan merupakan pola yang salah, maka proses tidak akan berlanjut.

Regex atau regexp merupakan singkatan dari Regular Expression. Regular expression sendiri memiliki arti rangkaian karakter yang menentukan pola pencarian. Pola tersebut digunakan algoritma pencarian suatu string ataupun untuk validasi input.

Sekilas Mengenal Regex

Regex akan mencocokkan pola rangkaian karakter dengan pola yang sudah ditetapkan melalui regex. Misalnya pada kasus nama seseorang, nama tersebut biasanya adalah rangkaian kata yang berisi huruf yang dimulai dari huruf a sampai dengan huruf z. Huruf tersebut dapat berupa huruf kecil ataupun huruf besar. Maka pola regex yang harus dicocokkan adalah "^[a-zA-Z]$". Jika karakter yang dimasukkan berisi angka 1 sampai dengan 9, maka pola tidak akan cocok dan tidak akan diproses ke tahap selanjutnya jika pengguna menekan tombol submit.

Pada kasus nama, ada beberapa hal yang harus di tambahkan yaitu karakter "\s" untuk white space, karakter "'", dan karakter "-" karena untuk beberapa nama yang spesifik karakter tersebut biasanya disertakan. Panjang dari huruf yang dimasukkan juga harus ditetapkan agar pola yang dicocokkan dapat lebih maksimal. Pola {2,100} artinya minimal karakter adalah 2 dan maksimal karakter adalah 100. Jadi jika digunakan penuh pada bilah input akan menjadi seperti pattern="^[a-zA-Z\s'-]{1,100}$".

Tanda "^" pada regex merupakan awal dari pola regex dan tanda "$" adalah akhir dari pola regex tersebut.

Menggunakan Regex pada Form HTML

Untuk menggunakan regex pada form HTML, hanya cukup dengan atribut yang ada pada HTML tersebut. Atribut pattern adalah atribut yang digunakan untuk memasukkan pola regex pada HTML. Pola yang dimasukkan pengguna akan dicocokan oleh browser saat pengguna berpindah bilah input (lost focus elemen)dan juga saat pengguna menekan tombol submit (onsubmit) pada form.

Jika pola yang dimasukkan tidak memiliki kecocokkan, maka maka form tersebut akan ditahan oleh browser dan tidak akan dikirim ke server sampai pengguna memasukkan karakter yang cocok dengan pola yang sudah ditetapkan.

Browser biasanya akan menampilkan tooltip menu pada bilah input yang berisi "Please match the requested format" yang artinya pola regex tidak memiliki kecocokan format.

Pada contoh kali ini menggunakan formulir dengan input yang biasa digunakan dalam memasukkan data pengguna meliputi username, nama pengguna, email, umur dengan rentang umur 10 tahun sampai dengan 80 tahun, tanggal lahir, nomor handphone dan nama website. Input yang digunakan dalam bentuk input type text, hal ini karena bersifat sementara sebagai sarana pengujian pola kecocokan regex. Namun anda dapat mengubah jenis input type-nya sesuai dengan type data nya misalnya seperti type email, date, url untuk mengganti input type text.

Berikut contoh lengkap HTML dengan validasi data menggunakan regex :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Regexp</title>
6.     <style>
7.     input[type=text]{height:24px;width:40%;padding:5px;}
8.     </style>
9.     
10. </head>
11. <body>
12. <h1>Validasi Form Dengan Regexp</h1>
13. <form name="f_" action="hal_kedua.html" method="get">
14. 
15.    <p>
16.    <label for="username">Username : </label>
17.    <input type="text" id="username" name="username" pattern="^[a-z0-9_-]{3,15}$">
18.    </p>
19. 
20.    <p>
21.    <label for="nama">Nama : </label>
22.    <input type="text" id="nama" name="nama" pattern="^[a-zA-Z\s'-]{1,100}$">
23.    </p>
24.    <p>
25.    <label for="email">Alamat Email :</label>
26.    <input type="text" id="email" name="email" pattern="^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+[.]+[a-zA-Z]{2,10}$" placeholder="joe@company.com">
27.    </p>
28. 
29.    <p>
30.    <label for="umur">Umur : </label>
31.    <input type="text" id="umur" name="umur" pattern="^([1-8][0])$" placeholder="10-80">
32.    </p>
33.    
34.    <p>
35.    <label for="tanggal_lahir">Tanggal Lahir : </label>
36.    <input type="text" id="tanggal_lahir" name="tanggal_lahir" pattern="^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$" placeholder="dd-mm-yyyy">
37.    </p>
38. 
39.    <p>
40.    <label for="no_hp">no HP: </label>
41.    <input type="text" id="no_hp" name="no_hp" pattern="^\+?([ -]?\d+)+|\(\d+\)([ -]\d+)$">
42.    </p>
43. 
44.    <p>
45.    <label for="website">Website : </label>
46.    <input type="text" id="website" name="website" pattern="http[s]?:\/\/www\.(?:[a-z]|[0-9]|[$-_@.&+]|[!*\(\),]|(?:%[0-9a-f][0-9a-f]))+">
47.    </p>
48. 
49.    <input type="submit" value="Submit">
50. </form>
51. 
52. </html>
53. 
54. 
55. 
56. 

Jika dijalankan dan diisi dengan pola yang salah akan menghasilkan :

validasi form regex

Jika diisi dengan pola yang benar maka browser siap untuk melanjutkan proses selanjutnya yaitu mengirimkan data ke server. Hasilnya seperti dibawah ini :

validasi form regex

   0   153

Kategori : tag iconhtml - tag iconcss - tag iconsecurity

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

Formulir ini hanya bagi member yang sudah terdaftar. disini.

Belum terdaftar? silahkan Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 

Silahkan login terlebih dahulu untuk mengirimkan polling. disini.

Belum terdaftar? silahkan Daftar disini.