Mudahnya Menambahkan Validasi di Sisi Client pada Aplikasi Web dari PHPMaker

Seperti yang kita ketahui, betapa mudahnya Web Developer membuat validasi di sisi server menggunakan kode PHP pada Aplikasi Web yang dibangun dengan PHPMaker. Beberapa artikel yang terkait dengan hal itu bisa Anda baca kembali dari tautan berikut ini:
– Bagaimana PHPMaker Menangani Validasi Data di Aplikasi Web?
– Mudahnya Menambahkan Validasi Sendiri di Aplikasi Web dari PHPMaker
– Lebih Lanjut Tentang Custom Validation Function di PHPMaker (Server-Side)
– Mudahnya Menentukan Field Mandatory pada Kriteria Pencarian dari PHPMaker

Harus diakui memang, bahwa selama ini kita cenderung fokus membahas validasi di sisi server, dan bukan di sisi client. Tentu saja ada beberapa pertimbangan mengapa kita menggunakan validasi di sisi server. Apa saja itu?

Pertama, karena secara standar PHPMaker sudah membangkitkan kode validasi menggunakan Javascript berdasarkan property Field yang misalnya tidak membolehkan kosong atau mengandung nilai yang tidak valid.

Kedua, karena PHPMaker telah menyediakan beberapa server event dengan karakteristik dan event terkait masing-masing, sehingga perlu kita optimalkan. Validasi di sisi server tentu saja jauh lebih aman dibandingkan di sisi Client.

Ketiga, untuk mengantisipasi jika browser yang digunakan tidak mendukung Javascript, meskipun kecil sekali kemungkinan ini terjadi. Apalagi Aplikasi Web yang dihasilkan oleh PHPMaker mewajibkan browser Pengguna harus mendukung Javascript, supaya menu yang digunakan berfungsi dengan baik.

Meskipun demikian, kadang-kadang kita sebagai Web Developer perlu menambahkan validasi kita sendiri di sisi Client; menggunakan kode Javascript; di samping validasi dari kode Javascript yang sudah dihasilkan oleh PHPMaker.

Pertanyaannya adalah, bagaimana caranya?

Jangan khawatir, karena PHPMaker sudah menyediakan Client Script yang bernama Form_CustomValidate yang terdapat di dalam halaman Add, Edit, List, Multi-Update, dan Search.

Katakanlah kita ingin menambahkan validasi tambahan pada field Alamat di halaman Add, yang tidak mengijinkan field Alamat kosong. Kita sebagai Web Developer cukup menambahkan kode Javascript berikut pada bagian Form_CustomValidate yang lokasinya ada di Client Scripts -> Table-Specific -> Add/Copy Page, sehingga kode selengkapnya menjadi seperti ini:

function(fobj) { // DO NOT CHANGE THIS LINE!
	// Your custom validation code here, return false if invalid.
	elm = this.GetElements("x_Alamat");
	if (elm && !ew_IsHidden(elm) && !ew_HasValue(elm))
		return this.OnError(elm, "<?php echo ew_JsEncode2(str_replace("%s", CurrentPage()->Alamat->FldCaption(), CurrentPage()->Alamat->ReqErrMsg)) ?>");
	return true;
}

Perhatikanlah dari kode itu. Kita bisa meng-embed atau menyisipkan kode PHP di dalam kode Javascript untuk memvalidasi field Alamat tidak boleh kosong. PHPMaker bahkan sudah memandu dengan memberikan keterangan untuk menaruh kode kita setelah komentar pada baris kedua di atas.

Dalam contoh kode tadi, jika field Alamat dikosongkan oleh Pengguna saat menambah data, maka sistem akan menampilkan pesan error yang menerangkan bahwa field Alamat tidak boleh kosong. Proses penyimpanan pun akan dibatalkan atau tidak dilanjutkan.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan? 😀