Validasi adalah proses memastikan bahwa data benar dan lengkap.
Dalam contoh dunia nyata, mari kita asumsikan sebuah situs yang membutuhkan formulir pendaftaran untuk diisi sebelum mendapatkan akses penuh ke situs ini. Halaman registrasi akan memiliki kolom input untuk username, password, id email dan lain sebagainya.
Ketika pengguna mengirimkan formulir, biasanya validasi akan dilakukan terlebih dahulu sebelum rincian dikirim ke server. Validasi ini akan mencoba untuk memastikan sejauh mungkin bahwa detail untuk bidang masukan dimasukkan dengan cara yang benar.
Misalnya, id email selalu harus dalam format. Alamat email ini dilindungi dari robot spam. Anda perlu mengaktifkan JavaScript untuk melihatnya. ; jika seseorang hanya memasukkan nama pengguna di id email, maka idealnya validasi harus gagal. Jadi validasi melihat melakukan pemeriksaan dasar ini sebelum rinciannya dikirim ke server untuk diproses lebih lanjut.
Dalam tutorial ini, Anda akan belajar-
- Validasi formulir menggunakan HTML5
- Validasi formulir menggunakan $ dirty, $ valid, $ invalid, $ pristine
- Validasi formulir menggunakan AngularJS Auto Validate
- Umpan balik pengguna dengan tombol Ladda
Validasi formulir menggunakan HTML5
Validasi formulir adalah proses pra-validasi informasi yang dimasukkan pada formulir web oleh pengguna sebelum dikirim ke server. Itu selalu lebih baik untuk memvalidasi informasi di sisi klien itu sendiri. Ini karena akan menambah lebih sedikit overhead jika pengguna harus disajikan dengan formulir lagi jika informasi yang dimasukkan salah.
Mari kita lihat bagaimana validasi formulir dapat dilakukan di HTML5.
Dalam contoh kami, kami akan menunjukkan satu formulir pendaftaran sederhana untuk pengguna di mana pengguna perlu memasukkan detail seperti nama pengguna, kata sandi, id email, dan usia.
Formulir tersebut akan memiliki kontrol validasi untuk memastikan bahwa pengguna memasukkan informasi dengan cara yang benar.
Event Registration Guru99 Global Event
Penjelasan Kode:
- Untuk jenis input teks, kami menggunakan atribut 'diperlukan'. Ini berarti bahwa kotak teks tidak boleh kosong saat formulir dikirimkan, dan beberapa jenis teks harus ada di kotak teks.
- Jenis masukan selanjutnya adalah kata sandi. Karena jenis input ditandai sebagai kata sandi, ketika pengguna memasukkan teks apa pun di bidang, itu akan disamarkan.
- Karena jenis masukan ditentukan sebagai email, teks di dalam kotak harus cocok dengan pola. Alamat email ini dilindungi dari robot spam. Anda perlu mengaktifkan JavaScript untuk melihatnya. .
- Ketika jenis input ditandai sebagai angka, jika pengguna mencoba memasukkan karakter apa pun menggunakan keyboard atau alfabet, itu tidak akan dimasukkan ke dalam kotak teks.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Untuk melihat validasi formulir beraksi, klik tombol Kirim tanpa memasukkan informasi apa pun di layar.
Setelah tombol submit diklik, akan muncul pop-up yang menunjukkan kesalahan validasi bahwa field perlu diisi.
Jadi validasi untuk kontrol yang ditandai sebagai diperlukan, menyebabkan pesan kesalahan ditampilkan jika pengguna tidak memasukkan nilai apa pun di bidang teks.
Saat pengguna memasukkan nilai apa pun dalam kontrol kata sandi, Anda akan melihat simbol '*' yang digunakan untuk menutupi karakter yang dimasukkan.
Mari kita masukkan id email yang salah dan klik tombol kirim. Setelah tombol kirim diklik, akan muncul pop-up yang menunjukkan kesalahan validasi bahwa bidang harus memiliki simbol @.
Jadi validasi untuk kontrol yang ditandai sebagai kontrol email akan menyebabkan pesan kesalahan ditampilkan jika pengguna tidak memasukkan id email yang benar di bidang teks.
Terakhir, saat Anda mencoba memasukkan karakter apa pun di kontrol teks usia, itu tidak akan dimasukkan di layar. Kontrol hanya akan terisi dengan nilai saat angka dimasukkan dalam kontrol.
Validasi formulir menggunakan $ dirty, $ valid, $ invalid, $ pristine
AngularJS menyediakan properti tambahannya untuk validasi. AngularJS menyediakan properti berikut untuk kontrol untuk tujuan validasi
- $ dirty - Pengguna telah berinteraksi dengan kontrol
- $ valid - Isi field valid
- $ invalid - Isi field tidak valid
- $ pristine - Pengguna belum berinteraksi dengan kontrol
Di bawah ini adalah langkah-langkah yang perlu diikuti untuk melakukan validasi Angular.
Langkah 1) Gunakan properti no validate saat mendeklarasikan formulir. Properti ini memberi tahu HTML5 bahwa validasi akan dilakukan oleh AngularJS.
Langkah 2) Pastikan formulir memiliki nama yang ditentukan untuknya. Alasan untuk melakukan ini adalah, saat melakukan validasi Angular, nama formulir akan digunakan.
Langkah 3) Pastikan setiap kontrol juga memiliki nama yang ditentukan untuknya. Alasan melakukan ini adalah, saat melakukan validasi Angular, nama kontrol akan digunakan.
Langkah 4) Gunakan direktif ng-show untuk memeriksa properti $ dirty, $ invalid, dan $ valid untuk kontrol.
Mari kita lihat contoh, yang menggabungkan langkah-langkah yang disebutkan di atas.
Dalam contoh kami,
Kami hanya akan memiliki bidang teks sederhana di mana pengguna perlu memasukkan nama Topik di kotak teks. Jika ini tidak dilakukan, kesalahan validasi akan dipicu, dan pesan kesalahan akan ditampilkan kepada pengguna.
Event Registration Guru99 Global Event
Penjelasan Kode:
- Perhatikan bahwa kami telah memberi nama untuk Formulir tersebut yaitu "myForm". Ini diperlukan saat mengakses kontrol pada formulir untuk validasi AngularJS.
- Menggunakan properti "novalidate" untuk memastikan bahwa formulir HTML memungkinkan AngularJS untuk melakukan validasi.
- Kami menggunakan arahan ng-show untuk memeriksa properti "$ dirty" dan "$ invalid". Artinya jika textbox telah dimodifikasi, maka nilai properti "$ dirty" akan menjadi true. Juga, dalam kasus di mana nilai kotak teks adalah nol, properti "$ tidak valid" akan menjadi benar. Jadi jika kedua properti benar, maka validasi untuk kontrol akan gagal. Oleh karena itu, jika kedua nilai benar, ng-show juga akan menjadi benar, dan kontrol span dengan karakter warna merah akan ditampilkan.
- Dalam hal ini, kami memeriksa properti "$ error" yang juga mengevaluasi true karena kami telah menyebutkan untuk kontrol bahwa nilai harus dimasukkan untuk kontrol. Dalam kasus seperti itu, di mana tidak ada data yang dimasukkan ke dalam kotak teks, kontrol bentang akan menampilkan teks "Nama pengguna diperlukan".
- Jika nilai kontrol kotak teks tidak valid, kami juga ingin menonaktifkan tombol kirim sehingga pengguna tidak dapat mengirimkan formulir. Kami menggunakan properti "ng-disabled" untuk kontrol untuk melakukan ini berdasarkan nilai bersyarat dari properti "$ dirty" dan "$ invalid" dari kontrol.
- Di pengontrol, kami hanya menyetel nilai awal dari nilai kotak teks ke teks 'AngularJS'. Ini hanya dilakukan untuk menyetel beberapa nilai default ke kotak teks saat formulir ditampilkan pertama kali. Ini menunjukkan lebih baik tentang bagaimana validasi terjadi untuk bidang kotak teks.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Ketika formulir pertama kali ditampilkan, kotak teks menampilkan nilai "AngularJS" dan "tombol kirim" diaktifkan. Segera setelah Anda menghapus teks dari kontrol, pesan kesalahan validasi diaktifkan, dan tombol Kirim dinonaktifkan.
Tangkapan layar di atas menampilkan dua hal
- Tombol kirim dinonaktifkan
- Tidak ada nama topik di kotak teks Topik. Oleh karena itu, ini mengaktifkan pesan kesalahan "Nama pengguna diperlukan."
Validasi formulir menggunakan AngularJS Auto Validate
Ada fasilitas di AngularJS untuk memvalidasi semua kontrol pada formulir secara otomatis tanpa perlu menulis kode kustom untuk validasi. Ini dapat dilakukan dengan memasukkan modul khusus yang disebut "jcs-AutoValidate."
Dengan modul ini, Anda tidak perlu menempatkan kode khusus apa pun untuk melakukan validasi atau menampilkan pesan kesalahan. Ini semua ditangani oleh kode di dalam JCS-AutoValidate.
Mari kita lihat contoh sederhana bagaimana mencapai ini.
Dalam contoh ini,
Kami hanya akan memiliki formulir sederhana dengan kontrol kotak teks yang merupakan bidang wajib. Pesan kesalahan harus ditampilkan jika kontrol ini tidak diisi.
Event Registration Guru99 Event
Penjelasan Kode:
- Pertama, kita perlu menyertakan skrip "jcs-auto-validate.js" yang memiliki semua fungsi validasi otomatis.
- Kita perlu memastikan bahwa setiap elemen termasuk "tag div" ditempatkan di kelas "form-group".
- Juga perlu dipastikan bahwa setiap elemen (yang merupakan elemen HTML seperti kontrol input, kontrol span, kontrol div dan sebagainya) seperti kontrol input juga ditempatkan di kelas form-group.
- Sertakan jcs-autovalidate dalam modul AngularJS JS Anda.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Secara default ketika Anda menjalankan kode Anda, formulir di atas akan ditampilkan sesuai kode HTML.
Jika Anda mencoba untuk Mengirim formulir, pesan kesalahan akan muncul yang mengatakan, "Bidang ini wajib diisi." Semua ini dilakukan dengan opsi JCS-AutoValidate.
Masukan pengguna dengan tombol Ladda
Tombol "ladda" adalah kerangka kerja khusus yang dibuat untuk tombol di atas JavaScript untuk memberikan efek visual pada tombol saat ditekan.
Jadi jika tombol diberi atribut "ladda" dan ditekan, efek putaran akan ditampilkan. Selain itu, ada gaya data berbeda yang tersedia untuk tombol guna memberikan efek visual tambahan.
Mari kita lihat contoh, bagaimana melihat tombol "ladda" bekerja. Kami hanya akan melihat formulir sederhana yang memiliki tombol kirim. Saat tombol ditekan, efek putaran akan ditampilkan pada tombol.
Event Registration Guru99 Event
Penjelasan Kode:
- Kami menggunakan direktif "ng-submit" untuk memanggil fungsi yang disebut "submit." Fungsi ini akan digunakan untuk mengubah atribut ladda dari tombol kirim.
- Atribut ladda adalah atribut khusus dari kerangka ladda. Atribut inilah yang menambahkan efek putaran ke kontrol. Kami mengatur nilai atribut ladda ke variabel yang dikirim.
- Properti gaya data sekali lagi merupakan atribut tambahan yang ditawarkan oleh framework ladda, yang hanya menambahkan efek visual yang berbeda ke tombol kirim.
- Modul 'AngularJS-ladda' perlu ditambahkan ke aplikasi AngularJS.JS agar kerangka ladda berfungsi.
- Awalnya, kami mendefinisikan dan menetapkan nilai variabel yang disebut 'mengirimkan' ke salah. Nilai ini ditetapkan untuk atribut ladda dari tombol kirim. Dengan awalnya menyetel ini ke false, kami mengatakan bahwa kami belum ingin tombol kirim memiliki efek ladda.
- Kami mendeklarasikan fungsi yang dipanggil saat tombol kirim ditekan. Dalam fungsi ini, kami mengatur 'pengiriman' ke true. Ini akan menyebabkan efek ladda diterapkan ke tombol kirim.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Saat formulir pertama kali ditampilkan, tombol kirim ditampilkan dalam bentuknya yang sederhana.
Saat tombol kirim ditekan, variabel pengiriman di pengontrol disetel ke true. Nilai ini diteruskan ke atribut "ladda" dari tombol kirim yang menyebabkan efek putaran tombol.
Ringkasan
- Validasi untuk kontrol HTML kotak teks dapat dilakukan dengan menggunakan atribut 'required'.
- Di HTML5, ada kontrol baru yang ditambahkan seperti kata sandi, email, dan nomor yang menyediakan set validasinya sendiri.
- Validasi formulir di AngularJS dilakukan dengan melihat nilai $ dirty, $ valid, $ invalid, dan $ pristine dari kontrol formulir.
- Validasi otomatis dalam aplikasi AngularJS juga dapat dicapai dengan menggunakan modul validasi otomatis JCS.
- Tombol Ladda dapat ditambahkan ke aplikasi Angular.js untuk memberikan sedikit sentuhan visual yang disempurnakan kepada pengguna saat tombol tersebut ditekan.