Cara Validasi Formular Melalui Javascript Part 3

Kita kembali lagi pada bagian yang ketiga tentang validasi formularnya dengan Javascript kita masih ada beberapa tugas yaitu mengecek bagian errornya sudah ada atau tidak dan yang kedua kita akan hapus errornya jika inputan tersebut sudah berhasil di isi. Kita langsung buat saja kita bungkus if untuk mengeceknya jika belum ada error dan kita mau variabel berhasil menjadi false sebagai berikut

apakah ada elemen error setelah elemen inputan tersebut menggunakan metode nextElementSibling dengan melihat nama classnya yaitu error. Oke tugas pertama kita berhasil yaitu menampilkan pesan errornya. Agar lebih rapi kita berikan sedikit style cssnya sebagai berikut

dan jika kita coba tampilkan di browser ketika saya tekan tombol submit akan seperti berikut

selanjutnya kita akan kerjakan tugas yang kedua yaitu mengecek sudah ada error atau belum. Misalnya jika user sudah berhasil mengisi inputannya maka kita ingin pesan error tersebut kita hapus seperti berikut kodenya

sama kaya yang sebelumnya tetapi kita uji jika namanya sama dengan error atau artinya jika sudah ada errornya kita mau menghapusnya dengan metode remove dan mengubah bordernya menjadi warna abu abu. Kita sudah berhasil membuat validasi formularnya. Kita tambahkan agar lebih advance lagi yaitu kita berikan nama text nya agar dapat informasi lebih detail seperti berikut

kita gunakan switch kita uji. Jika i adalah satu kita mau tampilkan text namanya. Setelah itu variabel textnya kita tampilkan pada elemen class errornya

itu dia cara validasi sederhana melalui javascript semoga jelas. Sampai jumpa pada artikel berikutnya.

Demo

15 Februari 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat