Pernahkah teman – teman melihat validasi form input, misalnya kita input pada form email. Jika text yang kita ketikkan belum benar validasi akan terus tampil hingga sampai cara input nya benar dan validasi akan hilang. Nah pada kesempatan kali ini di tutori Dumet School, saya akan memberikan tips dan trik tentang Cara Membuat Validasi Form Input Dengan Angularjs. Banyak sekali style yang bisa dibuat untuk validation form diantaranya adalah plugins Jquery, Javascript ataupun dengan css biasa, ini semua bisa di lakukan. Sebelum kita mulai belajarnya, apakah teman – teman tahu apa itu Angularjs,,,???
Angularjs adalah sebuah framework Javascript yang dikembangkan oleh google, seperti yang kita tahu arti dari framework ini melainkan kerangka kerja. Dan kerangka kerja ini berisi kumpulan – kumpulan javascript yang sudah di rancang dan memudahkan kita untuk memakainya, untuk lebih jelasnya teman – teman bisa membaca dokumentasinya di website resminya https://angularjs.org/
Latihan kali ini kita akan membuat dua buah form input email dan url, dan kedua nya akan kita berikan validasi dengan Angularjs. Berikut ini adalah tampilan yang akan kita buat
Baik, sekarang kita akan implementasikan Cara Membuat Validasi Form Input Dengan Angularjs. Seperti biasa teman – teman siapkan text editornya dan copy script html di bawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Cara Membuat Validasi Form Input Dengan Angularjs</title> </head> <body> <form> <table> <tr> <td><label>Email</label></td> <td><input type="email" name="email"></td> </tr> <tr> <td><label>Website</label></td> <td><input type="url" name="url"></td> </tr> </table> </form> </body> </html> |
Kemudian save dengan index.html, berikutnya kita akan berikan validasi Angularjs nya. Pertama – tama, tambahkan library Angularjs nya teman – teman bisa ambil dari website resminya atau bisa copy script di bawah ini
|
1 |
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js |
Berikan link ini di dalam tag script
kemudian teman – teman sisipkan script seperti gambar di bawah ini yang saya beri kotak berwarna merah
Kemudian kita berikan text validasi nya dengan tag <span>
Jika sudah save dan jalankan pada browser nya, maka akan menghasilkan output sesuai yang kita buat
Jika kita isikan dengan benar maka text validasi akan hilang
Sangat mudah bukan, oke sekian dulu pada artikel kali ini tentang Cara Membuat Validasi Form Input Dengan Angularjs.
Kita berjumpa lagi pada artikel berikutnya, Terimakasih dan Sampai Jumpa.
Semoga bermanfaat 🙂