Validasi Formulir AngularJS saat Pengiriman: Contoh Pendaftaran
James Hartman
Validasi Formulir di AngularJS
Validasi Formulir dalam AngularJS adalah proses untuk memastikan apakah data yang dimasukkan dalam formulir sudah benar dan lengkap. Saat pengguna mengirimkan formulir, validasi terjadi terlebih dahulu sebelum detailnya dikirim ke server. Proses validasi memastikan semaksimal mungkin bahwa detail untuk bidang input dimasukkan dengan cara yang benar.
Dalam contoh di dunia nyata, mari kita asumsikan sebuah situs yang mengharuskan formulir pendaftaran diisi sebelum mendapatkan akses penuh ke situs tersebut. Halaman pendaftaran akan memiliki kolom input untuk nama pengguna, kata sandi, ID email, dan sebagainya.
Misalnya, id email selalu harus dalam format nama pengguna@situs.domain; jika seseorang hanya memasukkan nama pengguna di id email, maka idealnya validasi akan gagal. Jadi validasi dilakukan dengan melakukan pemeriksaan dasar ini sebelum detail dikirim ke server untuk diproses lebih lanjut.
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. Hal ini karena akan menambah biaya tambahan jika pengguna harus diberikan formulir lagi jika informasi yang dimasukkan salah.
Mari kita lihat bagaimana validasi formulir AngularJS dapat dilakukan di HTML5.
Dalam contoh kami, kami akan menunjukkan satu formulir pendaftaran sederhana kepada pengguna di mana pengguna perlu memasukkan rincian 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Penjelasan Kode
- Untuk jenis input teks, kami menggunakan atribut 'required'. Ini berarti kotak teks tidak boleh kosong saat formulir dikirimkan, dan beberapa jenis teks harus ada di kotak teks tersebut.
- Jenis input berikutnya adalah kata sandi. Karena jenis masukan ditandai sebagai kata sandi, ketika pengguna memasukkan teks apa pun ke dalam bidang, teks tersebut akan disembunyikan.
- Karena jenis input ditentukan sebagai email, teks dalam kotak harus sesuai dengan pola nama@situs.domain.
- Bila tipe input ditandai sebagai angka, jika pengguna mencoba memasukkan karakter apa pun menggunakan papan ketik atau alfabet, karakter tersebut tidak akan dimasukkan ke dalam kotak teks.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di browser untuk validasi formulir AngularJS saat dikirimkan.
Keluaran
Untuk melihat tindakan validasi formulir, klik tombol Kirim tanpa memasukkan informasi apa pun di layar.
Setelah tombol kirim diklik, sebuah pop-up akan muncul yang menunjukkan kesalahan validasi bahwa kolom tersebut perlu diisi.
Jadi validasi untuk kontrol yang ditandai sebagai diperlukan, menyebabkan pesan kesalahan ditampilkan jika pengguna tidak memasukkan nilai apa pun di kolom teks.
Saat pengguna memasukkan nilai apa pun dalam kontrol kata sandi, Anda akan melihat simbol '*' digunakan untuk menutupi karakter yang dimasukkan.
Kemudian masukkan id email yang salah dan klik tombol kirim. Setelah tombol kirim diklik, akan muncul pop-up yang menunjukkan kesalahan validasi bahwa kolom tersebut 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 kolom teks.
Terakhir, saat Anda mencoba memasukkan karakter apa pun di kontrol teks usia, karakter tersebut tidak akan dimasukkan di layar. Kontrol hanya akan terisi dengan nilai ketika angka dimasukkan ke dalam kontrol.
Validasi formulir menggunakan $dirty, $valid, $invalid, $pristine
AngularJS menyediakan properti tambahannya untuk validasi. AngularJS menyediakan properti berikut untuk kontrol untuk tujuan validasi
- $kotor – Pengguna telah berinteraksi dengan kontrol
- $sah – Isi kolom valid
- $tidak valid – Isi kolom tidak valid
- $murni – Pengguna belum berinteraksi dengan kontrol
Berikut adalah langkah-langkah yang perlu diikuti untuk melakukan validasi Angular.
Langkah 1) Gunakan properti no validasi saat mendeklarasikan formulir. Properti ini memberitahu HTML5 bahwa validasi akan dilakukan oleh AngularJS.
Langkah 2) Pastikan formulir memiliki nama yang ditentukan untuknya. Alasan melakukan hal ini adalah, saat melakukan validasi Angular, nama formulir akan digunakan.
Langkah 3) Pastikan setiap kontrol juga memiliki nama yang ditentukan untuknya. Alasan melakukan hal ini adalah, saat melakukan validasi Angular, nama kontrol akan digunakan.
Langkah 4) Gunakan ng-pertunjukan direktif untuk memeriksa properti $dirty, $invalid dan $valid untuk kontrol.
Mari kita lihat contoh yang menggabungkan langkah-langkah yang disebutkan di atas.
Dalam contoh kita,
Kita hanya akan memiliki kolom 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Penjelasan Kode
- Perhatikan kami telah memberi nama untuk Formulir tersebut yaitu “myForm”. Ini diperlukan ketika mengakses kontrol pada formulir untuk validasi AngularJS.
- Menggunakan properti “novalidate” untuk memastikan bahwa formulir HTML memungkinkan AngularJS melakukan validasi.
- Kami menggunakan perintah ng-show untuk memeriksa properti “$dirty” dan “$invalid”. Ini berarti bahwa jika kotak teks telah dimodifikasi, maka nilai properti “$dirty” akan menjadi true. Selain itu, jika nilai kotak teks adalah null, maka properti “$invalid” akan menjadi true. Jadi, jika kedua properti tersebut true, maka validasi akan gagal untuk kontrol tersebut. Oleh karena itu, jika kedua nilai tersebut true, maka ng-show juga akan menjadi true, dan kontrol span dengan karakter berwarna merah akan ditampilkan.
- Dalam hal ini, kami memeriksa properti “$error” yang juga bernilai true karena kami telah menyebutkan bahwa kontrol harus memasukkan nilai untuk kontrol tersebut. Dalam kasus seperti itu, jika tidak ada data yang dimasukkan dalam kotak teks, kontrol span 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 tersebut untuk melakukan hal ini berdasarkan nilai kondisional dari properti “$dirty” dan “$invalid” dari kontrol tersebut.
- Di dalam kontroler, kita hanya menetapkan nilai awal dari nilai kotak teks ke teks 'AngularJS'. Ini hanya dilakukan untuk menetapkan beberapa nilai default ke kotak teks saat formulir pertama kali ditampilkan. Ini menunjukkan dengan lebih baik bagaimana validasi terjadi untuk bidang kotak teks.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran
Saat formulir pertama kali ditampilkan, kotak teks menampilkan nilai “AngularJS” dan “tombol kirim” diaktifkan. Begitu 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, muncul pesan kesalahan “Nama pengguna diperlukan.”
Validasi formulir menggunakan AngularJS Auto Validate
Terdapat fasilitas di AngularJS untuk memvalidasi semua kontrol pada formulir secara otomatis tanpa perlu menulis kode khusus untuk validasi. Hal ini dapat dilakukan dengan menyertakan modul khusus yang disebut “jcs-AutoValidate.”
Dengan adanya 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 hal ini.
Dalam contoh ini,
Kita hanya akan memiliki formulir sederhana dengan kontrol kotak teks yang merupakan bidang yang wajib diisi. Pesan kesalahan akan ditampilkan jika kontrol ini tidak diisi.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
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 “grup formulir”.
- Juga perlu memastikan bahwa setiap elemen (yang merupakan elemen HTML seperti kontrol input, kontrol span, kontrol div, dan sebagainya) seperti kontrol input juga ditempatkan di kelas grup formulir.
- Sertakan jcs-autovalidate dalam modul AngularJS JS Anda.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran
Secara default ketika Anda menjalankan kode Anda, formulir di atas akan ditampilkan sesuai kode HTML.
Jika Anda mencoba Mengirimkan 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 khusus yang dibuat untuk tombol di atasnya JavaNaskah untuk memberikan efek visual pada tombol saat ditekan.
Jadi jika sebuah tombol diberi atribut “ladda” dan ditekan maka akan muncul efek putaran. Selain itu, ada gaya data berbeda yang tersedia untuk tombol guna memberikan efek visual tambahan.
Mari kita lihat contoh bagaimana melihat tombol “ladda” beraksi. Kami hanya akan melihat formulir sederhana yang memiliki tombol kirim. Saat tombol ditekan, efek putaran akan ditampilkan pada tombol.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Penjelasan Kode
- Kami menggunakan “ng-kirim” direktif untuk memanggil fungsi yang disebut “kirim.” Fungsi ini akan digunakan untuk mengubah atribut ladda pada tombol kirim.
- Atribut ladda merupakan atribut khusus dari kerangka ladda. Atribut inilah yang menambahkan efek putaran pada kontrol. Kami menetapkan nilai atribut ladda ke variabel pengiriman.
- Properti data-style sekali lagi merupakan atribut tambahan yang ditawarkan oleh kerangka ladda, yang hanya menambahkan efek visual berbeda ke tombol kirim.
- Modul 'AngularJS-ladda' perlu ditambahkan ke aplikasi AngularJS.JS agar framework ladda dapat berfungsi.
- Awalnya, kami mendefinisikan dan mengatur nilai variabel yang disebut 'mengirimkan' ke false. Nilai ini ditetapkan untuk atribut ladda pada tombol kirim. Dengan menyetelnya ke false pada awalnya, kami mengatakan bahwa kami tidak ingin tombol kirim memiliki efek ladda.
- Kami mendeklarasikan fungsi yang dipanggil ketika tombol kirim ditekan. Dalam fungsi ini, kami mengatur 'pengiriman' ke true. Ini akan menyebabkan efek ladda diterapkan pada tombol kirim.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran
Saat formulir pertama kali ditampilkan, tombol kirim ditampilkan dalam bentuk sederhana.
Ketika tombol kirim ditekan, variabel pengiriman di pengontrol disetel ke true. Nilai ini diteruskan ke atribut “ladda” pada tombol kirim yang menyebabkan efek putaran tombol.
Ringkasan
- Validasi untuk kontrol HTML kotak teks dapat dilakukan dengan menggunakan atribut 'diperlukan'.
- Dalam HTML5, ada kontrol baru yang ditambahkan seperti kata sandi, email, dan nomor yang menyediakan serangkaian 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 kesan visual yang lebih baik kepada pengguna saat tombol ditekan.
