Di artikel yang saya tulis kemarin berjudul Mencegah Pengguna Memilih Tanggal yang Sudah Lewat di DateTimePicker pada PHPMaker 2021, kita belum menangani validasi di sisi client.
Di artikel ini, kita akan membahas bagaimana mudah dan cepatnya untuk menambahkan validasi tanggal yang harus diinput minimal harus tanggal hari ini dengan menggunakan Javascript di sisi client, sama seperti artikel Mudahnya Memvalidasi Format Tanggal Menggunakan Javascript dari PHPMaker yang saya tulis 5 tahun lalu.
Artinya, jika tanggal yang dimasukkan Pengguna Akhir lebih kecil dari tanggal hari ini, maka sistem akan menolak dan menampilkan pesan error yang memberitahukan Pengguna Akhir bahwa tanggal yang dimasukkan tidak boleh lebih kecil dari tanggal hari ini.
O iya, kode di artikel ini merupakan pelengkap dari kode yang sudah kita bahas di artikel sebelumnya. Jadi, jika Anda belum mengimplementasikannya, saya sarankan agar Anda membaca artikel yang saya tulis kemarin itu, lalu mempraktekkannya terlebih dulu sebelum mempraktekkan kode di artikel ini.
Jika sudah, pertanyaan selanjutnya adalah, lalu bagaimana caranya kita menambahkan validasi tanggal yang diinput minimal harus sama dengan tanggal hari ini?
Caranya sangat mudah dan cepat. Cukup dengan menambahkan sedikit kode ini saja ke Form_CustomValidate yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> Add/Copy Page milik table orders dari project demo2021 menggunakan PHPMaker 2021, sehingga kode selengkapnya menjadi seperti ini:
function(fobj) { // DO NOT CHANGE THIS LINE!
// Your custom validation code here, return false if invalid.
var orderDate = $(this).fields("OrderDate");
var todayDate = new Date();
todayDate.setHours(0,0,0,0);
if (orderDate.toJsDate() < todayDate)
return this.addCustomError("OrderDate", "The Order Date must be equal to or greater than today's date.");
return true;
}
Jika kita bandingkan kode barusan dengan kode yang terdapat pada artikel yang saya tulis 5 tahun lalu tadi, Anda akan melihat perbedaannya. Di PHPMaker 2021 ini, kita tidak perlu lagi menulis kode untuk memeriksa format tanggal-nya, karena sudah ditangani oleh framework Javascript bawaan PHPMaker 2021.
Artinya, jika format tanggal dan jam yang kita set dari menu Tools -> Locale Settings lalu memilih file .json yang sesuai dengan bahasa yang digunakan dengan Y-m-d H:i:s, maka ketika Pengguna Akhir menginput format tanggal yang berbeda dengan format tadi, maka sistem akan otomatis menyesuaikan dengan format yang sudah kita tentukan tadi. Keren, ‘kan? 😉
Itu artinya lagi, kode yang kita tulis di versi 2021 ini menjadi lebih ringkas lagi. Terbukti lagi, bahwa di versi terakhir selalu ada penyempurnaan fitur dari versi-versi major sebelumnya.
Terakhir, jangan lupa untuk men-generate ulang semua files script dengan menggunakan PHPMaker 2021.
Setelah itu, jalankan Aplikasi Web dari browser, lalu login sebagai user admin dan password master, lalu cobalah tambahkan record baru dari halaman List Orders, Anda akan melihat bahwa tanggal minimal yang bisa dipilih adalah tanggal hari ini.
Setelah memilih tanggal hari ini, tutup DateTimePicker-nya. Kemudian silahkan ganti tanggal Order Date yang sudah di-input tadi dengan mengubahnya langsung pada control TextBox field Order Date, kemudian tekan tombol Add untuk menyimpan data tersebut.
Perhatikan apa yang terjadi! Betul, sistem akan mencegah data tersebut disimpan, dimana validasi tersebut dilakukan di sisi client. Jadi, validasi ini semakin melengkapi lagi validasi yang sebelumnya sudah kita buat di sisi server.
Pengalaman Pengguna Akhir saat menggunakan Aplikasi Web yang kita generate dengan PHPMaker 2021 ini pun menjadi bertambah menyenangkan lagi. Tidak perlu menunggu validasi yang dilakukan di sisi server.
Tinggalkan Balasan