Validasi form menggunakan ajax

Pegecekan atau validasi form sering sekali kita temui di beberapa website, biasanya digunakan untuk pengecekan nama atau username pada saat kita register / mendaftar ke suatu website. Ane juga sering ditanyain oleh beberapa rekan tentang bagaimana cara membuat form validasi seperti itu. Nah di artikel ini akan ane bahas bagaimana cara membuatnya.

Untuk pembuatan form validasi ini ane menggunakan framework jQuery dan Bootstrap untuk javascript dan css nya. Kenapa sih harus pake framework? Jawabannya sih simple, untuk mempermudah pekerjaan. Sisanya ya seperti standart web-based menggunakan PHP untuk proses server side.

Yuk mari mulai kodingnya. Pertama buatlah sebuah file HTML atau PHP, dalam hal ini ane membuat file bernama form_validation.php.

Nah dari koding diatas sepertinya ga ada yang sulit kan yah? Kalau ada pertanyaan isi komen aja yah. Sekarang kita lanjut ke koding javascript nya. Silahkan buat satu buah file javascript, dalam hal ini ane membuat file yang bernama form_validation.js dan diletakkan pada folder js. Susunan foldernya silahkan disesuaikan dengan yang ada pada laptop atau komputer masing – masing. Berikut ini penampakannya:

Hmmmm… Dari script diatas, pertama – tama ada looping untuk mendapatkan semua field yang mempunyai tag “input”. Looping ini ane fungsikan untuk memberikan pesan error jika pada saat tombol “Daftar” di klik dan masih ada field / inputan yang kosong. Untuk melihatnya, silahkan dibaca artikel ini sampai habis dan dicobain deh hehe ^_^. Kedua, terdapat script untuk menambahkan event “blur” pada input text “txtUsername”. Event pada field txtUsername ini digunakan untuk melakukan pengecekan / validasi menggunakan ajax, apakah username sudah digunakan atau belum. Oh iya, dalam event ini juga, ane tambahkan perintah untuk membuat tombol Daftar menjadi disable, fungsinya adalah supaya user tidak bisa menekan tombol Daftar sebelum username di validasi terlebih dahulu.

Seperti yang terlihat pada script ajax diatas, tujuan atau target url nya adalah file getdata.php. Berikut ini penampakannya:

Ga ada yang perlu ditanyakan kayaknya, file getdata.php ini sama persis seperti yang terdapat pada artikel Mengisi form otomatis dengan ajax. Kita langsung aja mengintip file data.json tempat ane menyimpan datanya, ini dia:

Selain menggunakan file json, data juga bisa diambil dengan melakukan query ke database. Sehingga dalam pencarian atau validasi data tidak perlu melakukan looping seperti script pada file getdata.php diatas.

Sekian deh artikel dari ane. Jangan lupa komen yah…

2 comments

Leave a Reply to Rizal Cancel reply

Your email address will not be published. Required fields are marked *