Membuat Form Validasi dengan JQuery

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai cara membuat Validasi form dengan menggunakan JQuery. bagaimana caranya?...simak pembahasan berikut ini....

A. PENDAHULUAN
  • Pengertian
form Validasi merupakan sebuah fungsi form pada JQuery, dimana dengan Validasi ini maka akan ada peringatan jika form tidak di isi.
  • Latar Belakang
Ingin memberi peringatan di form jika kolom tidak di isi.

  • Maksud dan Tujuan
Dapat menerapkan validasi ini pada form HTML.

B. ALAT DAN BAHAN
  • Text Editor.
  • Web Browser.
  • Lubrary CSS (Bootstrap)
  • JQuery (Library Javascript).
  • pengetahuan mengenai HTML, CSS, dan sedikit Javascript.
C. JANGKA WAKTU PELAKSANAAN
  • Sekitar 3 jam
D. RANGKAIAN KEGIATAN
  • Definisi Validasi
Validasi merupakan proses inisialisasi pada form yang bertujuan untuk melihat apakah formnya sudah diisi atau belum.
  • Pembuatan Form Validasi dengan JQuery
Pertama tama kita buat halaman indexnya, file ini berekstensi php, karena juga berhubungan dengan database. berikut merupakan script halaman indexnya.

kita buat pemanggilan bootstrap, css, dan javascriptnya


kemudian kita buat formnya, form disini berisi tampilan inputnya beserta teks untuk peringatan validasi nya



kemudian kita ketikkan code JQuerynya, berikut merupakan scriptnya...


kemudian untuk membuat teks validasi tersembunyi sebelum adanya validasi, pada css kita beri display: none;



kemudian jika kita buka hasilnya di browser akan seperti ini...


dan jika formnya tidak kita isi, maka pada form yang tidak di isi akan muncul tampilan peringatan sesuai div id yang kita berikan pada setiap span.




E. HASIL YANG DIDAPATKAN
  • Dapat menerapkan validasi di form HTML.
F. TEMUAN PERMASALAHAN
  • Tampilannya amburadul karena Library Bootstrapnya belum dipanggil
G. KESIMPULAN
  • Tanpa kita memanggil setiap library, maka tampilannya akan tidak sesuai seperti apa yang kita harapkan.
H. REFERENSI

Sekian sharing yang dapat saya sampaikan hari ini...

Semoga Bermanfaat....

Wassalammualaikum Wr. Wb.