PRAKTIKUM ASP.NET 6 VALIDATION CONTROL A. Pengunaan RequiredFieldValidator RequiredFieldValidator digunakan untuk memvalidasi apakah user sudah memasukkan inputan atau inputan tidak boleh kosong. Langkah-langkah membuat RequiredFieldValidator adalah sbb: 1. Buat Project ASP.NET empty web application baru dengan nama Bab3. 2. Buka file Web.config dan tambahkan kode seperti dibawah ini: 3. Kemudian Tambahkan web form dengan nama RequireValidator.aspx dan ketikkan beberapa contoh kode dibawah ini : (Anda dapat men-drag n drop control component di toolbox ke dalam halaman source kode dan langsung menambah dan mengedit properties-nya)
4. Kemudian double click button Submit dan akan membuka halaman source dan ketikkan beberapa contoh kode dibawah ini: 5. Setelah itu tekan CTRL+F5 maka akan tampil browser hasil program seperti dibawah ini:
B. Penggunaan RequiredFieldValidator dengan Image 1. Tambahkan web form dengan cara klik kanan project pilih add new item, beri nama RequireImage.aspx dan ketikkan contoh kode dibawah ini setelah drag n drop component dari ToolBox. 2. Kemudian lihat hasil di browser dengan menekan CTRL+F5 dan nampak seperti dibawah ini jika textbox dikosongkan ketika button Submit diklik. C. Penggunaan RangeValidator Range Validator digunakan untuk membatasi inputan dari user sesuai dengan nilai minimal dan maksimal yang sudah ditentukan. 1. Tambahkan web form pada project beri nama RangeValidator.aspx dan ketikkan contoh kode dibawah ini setelah drag n drop component dari ToolBox :
2. Kemudian lihat hasilnya dengan menekan CTRL+F5, jika inputan kurang dari 4 dan lebih dari 99 akan tampil pesan kesalahan. D. Penggunaan CompareValidator pada Password CompareValidator digunakan untuk membandingkan nilai yang digunakan pada server control yang berbeda, atau membandingkan nilai input yang dimasukkan user apakah memenuhi dengan nilai yang diharapkan. 1. Tambahkan web form baru dengan nama ComparePass.aspx, kemudian ketikkan kode seperti contoh dibawah ini setelah drag n drop component dari ToolBox: 2. Kemudian lihat hasilnya dengan menekan CTRL+F5.
E. Penggunaan Compare Validator untuk Pengecekan tipe data 1. Tambahkan web form baru beri nama CompareType.aspx, kemudian ketikkan kode berikut:
2. Kemudian lihat hasilnya dengan menekan CTRL+F5 F. Penggunaan Regular Expression Validator Regular Expression Validator digunakan untuk membandingkan inputan dengan regular expression yang Anda buat antaralain yang sering digunakan adalah pengecekan e- mail, website, nomor telepon, dan lain-lain. 1. Tambahkan web form di project beri nama RegexEmail.aspx, ketikkan kode dibawah ini: 2. Kemudian lihat hasilnya dengan menekan CTRL+F5.
G. Penggunaan Custom Validator untuk NIS Custom Validator digunakan ketika validation control yang ada tidak dapat memenuhi kebutuhan Anda, maka dapat dibuat fungsi sendiri untuk memvalidasi inputan dari user. 1. Tambahkan web form pada project dan beri nama CustomNIS.aspx kemudian ketikkan kode dibawah ini : 2. Kemudian klik kanan pada halaman dan pilih View Code maka akan tampil source seperti dibawah ini dan tambahkan kode didalam method CekNis_ServerVal(). 3. Kemudian lihat hasilnya dengan menekan CTRL+F5.
H. Penggunaan ValidationSummary ValidationSummary digunakan untuk menampilkan list detail error dari validation control. Selain menampilkan list detail, validation summary menampilkan pesan error melalui messagebox. 1. Tambahkan web form pada project dengan nama ValSummary.aspx
2. Tambahkan style CSS pada project dengan nama MyStyle.css, Anda dapat mengkreasikan menurut selera.
3. Anda dapat melihat desain dengan menekan split:
4. Kemudian lihat hasilnya dengan menekan CTRL+F5, amati hasilnya jika inputan diberi kesalahan akan tampil pesan di halaman ataupun di messagebox.
TUGAS 1. Praktekkan contoh beberapa jenis Validation diatas sehingga membentuk beberapa project didalam 1 Solution Bab 3 seperti : 2. Buat Validasi Form seperti dibawah ini (dengan CSS), kombinasikan kode dengan contoh-contoh validasi diatas! INPUTAN BIODATA VALIDATION SUMMARY Nama Lengkap : NIS : Umur : Email : Password : Confirm Password : SUBMIT Catatan jika inputan diisi semua dan benar sesuai aturan maka akan menampilkan data yang diinputkan. Selamat Mengerjakan, semoga sukses! Salam Hangat, Hadi Wijaya