Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin – halo teman-teman malasngoding.com yang mudah-mudahan gak malas ngoding kayak nama blog saya ini ya. hehe.. biar lah nama blog nya saja yang malas ngoding. kitanya mudah-mudahan gak malas ngoding ya teman-teman. karena salah satu di buat nya blog ini adalah untuk mengobati rasa malas ngoding yang hinggap pada diri sebagian teman-teman. hehe. dengan tutorial-tutorial yang ada di www.malasngoding.com ini mudah-mudahan dapat  menghilangkan rasa malas ngoding.

Oke teman-teman. sesuai dengan judul pada artikel ini “Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin“. di kesempatan kali ini saya akan membahas tentang bagaimana sih cara membuat form validation sendiri. tanpa menggunakan library jquery yang lainnya seperti jquery.validate.js. tetapi kita hanya akan menggunakan jquery.js saja. oh ya jika teman-teman ada yang belum mempelajari tentang tutorial jquery dasar, teman-teman bisa langsung membaca tutorial jquery yang sudah kita bahas sebelumnya : Belajar Pengenalan Jquery Dasar.

Walaupun mungkin akan sangat sederhana, tapi mungkin dapat bermanfaat lah untuk menambah-nambah ilmu pengetahuan tentang function-function nya jquery. pembahasan nya masih sangat sederhana. teman-teman bisa mengembangkan nya lagi. atau mungkin teman-teman bisa membuat sendiri library jquery untuk menangani form validasi. mudah-mudahan Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin ini dapat bermanfaat.

Form Validasi / Form Validation

Seperti yang kita ketahui bersama. validasi form sangat lah di butuhkan pada sebuah website atau sistem. ini untuk meminimalisir kekurangan data yang di inputkann oleh user. sudah semua aplikasi pasti menerapkan validasi pada form. untuk mengatasi kekosongan data yang di anggap data penting.

Untuk mengatasi kekosongan data atau data yang penting harus di isi, maka kita dapat membuat teknik form validasi pada sebuah form.

Apa Saja Yang Di butuhkan ?

Yang di butuhkan tidak banyak teman-teman, kita hanya perlu library jquery.js. teman-teman bisa mendownloadnya di situs resmi nya. https://jquery.com/. lalu yang kita butuhkan untuk mengikuti tutorial form validasi ini adalah sebuah file. bisa itu file html ataupun php. terserah teman-teman. karena ini hanya contoh, maka saya gunakan html saja. yaitu dengan membuat file validasi.html. pada file validasi.html ini kita akan membuat simulasi form yang akan kita buatkan pegecekan validasinya. bahwa form wajib di isi. jika tidak di isi maka akan muncul pesan bahwa user harus mengisi form tersebut. kemudian yang ketika kita membutuhkan file css untuk mempercantik tampilan contoh saja sih teman-teman.  tapi wajib teman-teman buat ya. agar contoh ini dengan yang teman-teman buat sama. gak ada yang error ntar.

• validasi.html
• validasi.css
• library jquery.js

Membuat Form Validasi Sendiri Dengan JQuery

Langsung saja masuk ke tahap membuat form validasi tanpa plugin. hanya menggunakan jquery.js. silahkan teman-teman buat sebuah file dengan nama validasi.html dan letakkan satu directory dengan jquery.js . agar mudah kita hubungkan.

validasi.html

perhatikan di sini.

kita hubungkan dengan file css dan jquery nya.

lalu kemudian membuat form sederhana.

form yang kita buat bertipe text. dan kita beri id dengan value “nama”. ini penting teman-teman. karena kita mendeteksi form yang kosong nya melalui id ini.

dan pada element span kita membuat pesan yang akan di munculkan. berikan class pesan pada element ini. karena penting.

bagian javascript nya saya bahas sebentar lagi. saya bahas bagian css nya dulu. biar nyambung ntar pembahasannya.

buat sebuah file lagi dengan nama validasi.css.

validasi.css

yang paling terpenting dari css di atas adalah.

kenapa saya bilang penting. karena bisa teman-teman lihat di atas. pada class pesan kita berikan perintah untuk menyembunyikan class pesan. agar pesan peringatannya tidak muncul dulu. nanti pesan peringatannya muncul pada saat form di submit.

nah sampailah pada bagian terpenting dari tutorial membuat form validasi dengan jquery ini teman-teman.

teman-teman perhatikan pada syntax javascript yang sudah kita sisipkan tadi pada fiel validasi.html.

di sini kita memberikan event submit pada form.

jadi pada saat form di submit maka perintah yang berada di dalam function ini akan di jalankan.

pertama kita tangkap jumlah karakter yang di input pada form.

lalu kemudian kita mengecek nya. jika jumlah karakter yang di input sama dengan nol(berarti tidak ada yang di input). maka class pesan nama akan di munculkan. class pesan nama adalah pesan peringatan yang tadinya kita sembunyikan. jadi pada saat form di submit atau di klik pada tombol. maka akan di lakukan pengecekan. jika yang di input kosong maka pesan peringatan pun di tampilkan.

yang teman-teman lihat di atas adalah fungsi jquery untuk memanipulasi css. baca tutorial sebelumnya tentang manipulasi css dengan jquery.

dan perintah

berguna untuk menghentikan proses form. sehingga halaman tidak akan di reload/refresh.

oke selesai sudah teman-teman penjelasannya. waktunya melihat hasil dari Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin.

jalankan pada browser.

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

kita tidak akan memasukkan apa-apa pada form. untuk melihat hasil form balidasi yang kita buat. langsung saja kita klik pada tombol simpan. maka akan muncul pesan peringatan bahwa form harus di isi.

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

nah seperti yang kita lihat. pesan peringatan pun muncul.”anda harus mengisi nama!”.

sekian lah teman-teman tutorial kali ini tentang Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin. semoga dapat bermanfaat. mungkin teman-teman kesulitan dalam melihat source code nya karena terpisah-pisah. berikut ini saya lampirkan ulang.

validasi.html

validasi.css

Jangan lupa baca juga tutorial jquery lainnya:

• Membuat modal dialog dengan jquery(tanpa plugin)