Tugas - 5 PWEB B : Form Validation Data Vaksinasi

Tugas 5 Pemrograman Web : Form Validation Data Vaksinasi

Pada tugas kali ini, saya membuat sebuah form yang dapat melakukan pengecekan terhadap validasi data yang diinputkan, terkhusus untuk mengecek apakah setiap kolom input telah dimasukkan data oleh user. Kasus yang disediakan adalah untuk merekap data status vaksinasi mahasiswa FTEIC ITS untuk memulai kuliah tatap muka.

Berikut tampilan halaman utama ketika mengunjungi website, user dapat mengklik tombol "Isi Form Data Vaksinasi" untuk masuk ke halaman formnya.


Tampilan halaman formnya.


Saya mencoba untuk mengisi input bagian "Nama" dan mengosongkan bagian yang lain, akan tampak dialog alert seperti berikut.


Fitur ini berlaku untuk semua kolom yang ada pada form, berurutan dari atas.

Dapat dilihat bahwa ada bagian untuk memilih status vaksinasinya, apabila belum memilih maka tidak muncul form input berikutnya, sedangkan jika telah memilih salah satunya maka akan tampil seperti berikut.

Untuk pilihan "Sudah"

Untuk pilihan "Belum"

Sama seperti sebelumnya, jika kolom input lanjutannya ada yang tidak terisi ketika user menekan submit, maka akan muncul alert dialog seperti berikut.


Kemudian, ketika user telah melengkapi semua data yang dibutuhkan dan menekan submit, akan muncul alert dialog untuk meyakinkan user benar-benar ingin submit datanya atau tidak.


Ketika setuju untuk submit akan muncul dialog tab yang menyatakan bahwa submit data telah sukses.


Website Form Validation ini dikerjakan menggunakan HTML, CSS, dan JavaScript, serta SweetAlert2 untuk membuat alert dialognya. Berikut source codenya :

File form.html


File script.js


Untuk lebih lengkapnya bisa dilihat pada link berikut : https://github.com/naimackerman/validasi-form

Comments

Post a Comment