Mudahnya Memvalidasi Format Tanggal Menggunakan Javascript dari PHPMaker

Saya yakin Anda pasti masih ingat dengan artikel saya kemarin, yang membahas tentang mudahnya mencegah Pengguna untuk memilih Tanggal dari hari-hari yang sudah lewat dari PHPMaker. Betapa PHPMaker dapat membantu Web Developer untuk mewujudkan hal tersebut.

Di artikel tadi sudah diuraikan bahwa kita mengkostumais kalender menggunakan kode Javascript/jQuery supaya tanggal tertentu tidak bisa dipilih oleh Pengguna. Supaya kita bisa menggunakan kode tersebut, maka kita tidak menggunakan pengaturan kalender dari Fields setup, seperti yang biasa kita lakukan selama ini.

Itu artinya, kode untuk memvalidasi format data Tanggal menjadi tidak di-generate oleh PHPMaker. Demikian juga kode untuk memvalidasi nilai Tanggal apakah lebih besar atau sama dengan Tanggal hari ini, harus ditangani sendiri oleh Web Developer.

Kondisi ini mengakibatkan format data Tanggal yang diinput oleh Pengguna masih dapat diubah. Katakanlah yang tadinya kita berharap format Tanggal adalah yyyy/mm/dd, maka Pengguna bisa memasukkan Tanggal dengan format dd/mm/yyyy, dan jika ini terjadi maka akan menimbulkan kekacauan. Selain itu, Pengguna juga menjadi bisa mengubah nilai data Tanggal menjadi lebih kecil dari Tanggal hari ini.

Untuk mencegah hal tersebut terjadi, kita harus menangani proses validasi format Tanggal. Kita harus memastikan format Tanggal yang diinput oleh Pengguna adalah yyyy/mm/dd, dan bukan format lainnya. Mengapa hal ini harus kita tangani? Karena jika tidak, maka nilai tanggal yang tersimpan akan menjadi 0000/00/00.

Selain itu, di artikel tadi, kita baru hanya fokus untuk men-disable tanggal tertentu di sisi kalender. Kita belum memvalidasi data Tanggal yang dimasukkan harus minimal dengan Tanggal hari ini atau lebih besar dari Tanggal hari ini. Mengapa ini juga perlu? Untuk mencegah data Tanggal yang lebih kecil dari tanggal hari ini bisa lolos masuk ke Database.

Nah, untuk menambahkan kode validasi format Tanggal tadi, sekaligus untuk memvalidasi bahwa Tanggal yang dimasukkan harus lebih besar atau sama dengan Tanggal hari ini, maka cukup tambahkan kode Javascript berikut ke dalam Form_CustomValidate yang terdapat di bawah Client Scripts -> Table-Specific -> Add/Copy Page:

function(fobj) { // DO NOT CHANGE THIS LINE!
 	// Your custom validation code here, return false if invalid.
	elm = this.GetElements("x_OrderDate");
	if (elm && !ew_CheckDate(elm.value))
		return this.OnError(elm, "Order Date format must be 'yyyy/mm/dd'"); // Return false if invalid
 	
 	var todayDate = new Date();
 	todayDate.setHours(0,0,0,0);
 	var orderDate = $(this).fields("OrderDate");
 	if (orderDate.toJsDate() < todayDate) 
 		 return this.OnError(orderDate, "The Order Date must be equal to or greater than today's date."); // Return false if invalid
 	return true;
}

Perhatikanlah. Hanya dengan menambahkan sedikit kode Javascript pada bagian Form_CustomValidate dari sisi Client Scripts, maka kita sudah bisa memvalidasi format data Tanggal harus sesuai dengan yyyy/mm/dd. Kita juga sudah bisa memvalidasi bahwa data Tanggal yang dimasukkan harus lebih besar atau sama dengan Tanggal hari ini. Jika kedua kondisi tadi tidak terpenuhi, maka data tidak dapat disimpan.

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