Mudahnya Memvalidasi Data Menggunakan Fields jQuery Plugin dari PHPMaker

Ada yang masih ingat dengan Fields jQuery Plugin di PHPMaker? Fitur ini mulai ada sejak versi 12. Tujuan utamanya untuk memudahkan Web Developer saat mengambil dan/atau memvalidasi data yang diinput oleh Pengguna Akhir Aplikasi Web.

Mungkin ada yang bertanya, apa yang menyebabkan menjadi mudah? Jawabannya, karena Fields jQuery Plugin menyederhanakan cara mengakses nilai dari suatu elemen di form. Tidak seperti jika kita menggunakan kode jQuery Native (asli) yang mengandalkan id dari elemen yang bertalian, maka dengan menggunakan Fields jQuery Plugin, kita tidak perlu lagi mengandalkan id dari elemennya. Kita dapat mengakses nilai dari suatu elemen berdasarkan nama asli Field-nya.

Seperti yang kita ketahui, id dari suatu elemen input di suatu Form yang di-generate oleh PHPMaker selalu diawali dengan prefix x_. Jika menggunakan kode jQuery Native, maka id elemen yang diawali dengan x_ tadi harus selalu kita gunakan. Bagi sebagian Web Developer mungkin hal ini cukup merepotkan, karena harus mengingat-ingat prefix tadi. Bagi sebagian Web Developer mungkin tidak menjadi masalah.

Meskipun demikian, fitur Fields jQuery Plugin ini tentu saja tetap sangat membantu. Sebagai Web Developer kita bahkan bisa menganalog-kan style validasi data menggunakan kode jQuery melalui bagian Client Scripts tadi menjadi hampir sama dengan kode PHP melalui Server Events.

Katakanlah kita ingin menambahkan validasi data terhadap dua Field sekaligus saat Pengguna sedang menambah data. Jika data pada Field_Satu tidak ada nilainya, dan data pada Field_Dua ada nilainya, maka sistem akan menampilkan pesan peringatan kepada Pengguna supaya mengisi data terlebih dulu di Field_Satu. Jika tidak, maka sistem tidak akan pernah menyimpan data tersebut.

Apabila kita menggunakan kode di sisi server, maka kita bisa menggunakan server event Row_Inserting yang terdapat di bawah lokasi Server Events -> Table-Specific -> Common, sehingga kode PHP selengkapnya menjadi kira-kira seperti ini:

// Row Inserting event
function Row_Inserting($rsold, &$rsnew) {
    // Enter your code here
    // To cancel, set return value to FALSE
    if ( ($rsnew["Field_Satu"] == "") &&  ($rsnew["Field_Dua"] <> "") ) {
        $this->setFailureMessage("Field Satu tidak boleh kosong jika Field Dua memiliki nilai.");
        return FALSE;
    }
    return TRUE;
}

Sekarang mari kita bandingkan dengan kode di sisi client. Cukup tambahkan kode berikut ke dalam Form_CustomValidate yang terdapat di bawah lokasi 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.
 	var $row = $(this).fields();
	if ($row["Field_Satu"].value() == "" && $row["Field_Dua"].value() != "")
 		return this.OnError($row["Field_Satu"], "Field Satu tidak boleh kosong jika Field Dua memiliki nilai.");
 	return true;
}

See? Sudah lihat perbandingan antara kode PHP di sisi server dan kode jQuery di sisi client itu, ‘kan? Sangat mirip style keduanya, khususnya jika menggunakan Fields jQuery Plugin di kode barusan. 🙂

Tidak hanya itu saja. Ternyata dengan menggunakan Fields jQuery Plugin, kita dapat mengabaikan tipe control yang digunakan oleh elemen tersebut. Dari contoh kode barusan, maka kita cukup hanya mengambil nilai dari property value milik Fields jQuery Plugin.

Sekarang bandingkanlah jika menggunakan kode Javascript atau jQuery Native, maka kita harus memperhatikan tipe control-nya. Contoh, jika kedua tipe control tadi adalah CheckBox, maka kode di atas menjadi kira-kira seperti ini:

function(fobj) { // DO NOT CHANGE THIS LINE!
 	// Your custom validation code here, return false if invalid.
  	elm_Field_Satu = this.GetElements("x_Field_Satu[]");
 	elm_Field_Dua = this.GetElements("x_Field_Dua[]");
 	if ( (elm_Field_Satu && !ew_IsHidden(elm_Field_Satu) && !ew_HasValue(elm_Field_Satu)) && (elm_Field_Dua && !ew_IsHidden(elm_Field_Dua) && ew_HasValue(elm_Field_Dua)) )
 		return this.OnError(elm_Field_Satu, "Field Satu tidak boleh kosong jika Field Dua memiliki nilai.");
 	return true;
}

Karena kita menggunakan kode Javascript atau jQuery Native, dan kedua elemen menggunakan control CheckBox dalam contoh di atas misalnya masing-masing tipe-nya enum(‘Y’, ‘N’), maka id elemen di atas memiliki akhiran []. Sedikit agak repot jika menggunakan kode Javascript atau jQuery Native.

O iya, sebagai bocoran saja. Kode validasi Javascript yang terakhir ini sebenarnya saya peroleh dari kode validasi di sisi client yang di-generate oleh PHPMaker. Tentu saja kita harus berpedoman kepada kode yang dihasilkan oleh PHPMaker tadi jika ingin menggunakannya di bagian Form_CustomValidate.

So? Kesimpulannya, usahakanlah untuk selalu menggunakan Fields jQuery Plugin. Karena di samping lebih sederhana dan simpel, kita sebagai Web Developer tidak perlu lagi repot-repot menyesuaikan kode untuk id elemen sesuai dengan tipe control yang digunakan oleh Field tersebut.