Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Menambahkan Form Validasi ke Komentar WordPress menggunakan jQuery

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by AaliyaA (you can also view the original English article)

Ketika datang ke user experience yang lebih sederhana, memiliki validasi formulir Anda terjadi langsung pada halaman yang sama jauh lebih bersih daripada memuat ulang halaman dan mungkin kehilangan beberapa konten formulir. Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana menggunakan jQuery untuk melakukan pengecekan instan pada contoh formulir komentar.

Contoh Kita

Untuk contoh kita, kita akan menambahkan validasi form ke formulir komentar di tema default WordPress. Prosesnya hampir sama untuk semua jenis validasi formulir namun demikian Anda dapat dengan mudah menerapkan teknik ini ke contoh non-WordPress.
Tema yang akan kita tambahkan validasi adalah tema Default WordPress yang dikemas dengan setiap instalasi. Jadi jika Anda ingin mengikuti sepenuhnya, cukup kunjungi Wordpress.org dan unduh dan instal salinan di server Anda.

Jika Anda tidak terbiasa dengan bentuk komentar WordPress, Anda mungkin juga ingin mengunjungi tutorial NETTUTS - Mengungkap Rahasia dari WordPress 'Comments.php




Langkah 1 - Download jQuery & the Bassistance.de Validation Plugin

Anda dapat men-download jQuery di situs web jQuery.com Di halaman pertama Anda akan langsung melihat 'Download jQuery dan beberapa downloadan yang berbeda. Kita tidak akan mengotak-atik kerangka jQuery, jadi Anda dapat mengunduh versi 'Minified and Gzipped', ini artinya dikompresi.

Selanjutnya kita perlu jQuery plugin validasi, dibuat oleh bassistance.de. Plugin ini memungkinkan Anda untuk memvalidasi formulir web, Anda dapat mendownloadnya di sini. File ini berisi beberapa file Javascript, tetapi kita hanya perlu "jquery.validate.min.js" (juga compressed) untuk tutorial ini.

Langkah 2 - mengunggah berkas

Sekarang Anda harus memiliki 2 file, "jquery.validate.min.js" dan "jquery-1.2.6.min.js", kita akan meng-upload ini ke direktori template WordPress kita.

Karena dalam tutorial ini kita menggunakan tema default WordPress, benar-benar disebut "default", folder kita perlu terletak di /wp-content/themes/default/.

Agar semuanya tetap teratur, kita akan membuat direktori baru bernama "js", ini akan menjadi folder dengan semua javascript. Ketika Anda memiliki direktori yang dibuat, unggah file ke folder yang baru kita buat. (/wp-content/themes/default/js)

Langkah 3 - Loading Javascript

Sekarang kita memiliki javascript yang diunggah di direktori kita, kita masih harus memuatnya ke dalam tema kita. Javascript harus memuat antara tag <head> </head>. Tag head berada dalam file php, yang terletak di direktori tema.

Jadi cari 'header.php', ini adalah file di mana bagian atas kode tema berada. Sekarang kita harus memastikan bahwa kita menambahkan javascript sebelum 2 baris ini:

Ini adalah bagaimana kita menyertakan file javascript:

Tentu saja ketika Anda membuat tema WordPress untuk klien, Anda ingin memastikannya mudah dipasang. Anda tidak ingin mengatakan, "Anda masih harus mengubah URL ke javascript!"
Kita ingin semuanya terjadi secara otomatis, jadi sebaiknya jika kita menggunakan tag WordPress. Untuk menampilkan URL ke direktori template Anda dapat menggunakan kode ini:

Jadi dalam kombinasi dengan kode untuk memasukkan javascript, hasil akhirnya adalah:

Sekarang 2 file javascript ini akan dimuat di setiap halaman, dan dapat digunakan di semua halaman WordPress menggunakan tema ini!

Langkah 4 - Mengaktifkan Validasi

OK, sekarang saatnya untuk mengaktifkan validasi form komentar, jadi kembali ke direktori tema, dan cari /wp-content/themes/default/comments.php

Sekarang, kita hanya perlu melihat bagian formulir kode! Formulirnya dimulai pada baris 73, dan terlihat seperti ini:

Sekarang seperti yang Anda lihat, form tersebut memiliki elemen ID, namanya 'commentform', kita membutuhkan nama ini untuk mengaktifkan javascript.
Jangan tutup file ini, pertama kembali ke 'header.php', dan tambahkan baris berikut di bawah jquery.validate.min.js

Seperti yang Anda lihat, ID formulir ada di sana, "commentform" ini mengaktifkan validasi untuk formulir apa pun dengan id commentform.
Jadi hati-hati Anda tidak menggunakan ID duplikat atau yang lain beberapa formulir akan divalidasi, ketika mereka mungkin tidak perlu.

Sekarang, ketika Anda mengirimkan komentar saat ini dan Anda meninggalkan semua bidang kosong, itu tidak melakukan apa pun, itu masih menunjukkan kesalahan WordPress default. Pada langkah berikutnya saya akan menunjukkan kepada Anda bagaimana memulai validasi untuk setiap bidang.

Langkah 5 - Nama bidang validasi

Sekarang saatnya untuk memulai validasi untuk setiap bidang. Ini berarti akan memberitahu validasi file javascript seperti apa validasi yang diperlukan. Validasi javascript sangat mudah digunakan, Anda hanya perlu memasukkan beberapa kata khusus untuk memulai validasi. Jadi mari kita mulai dengan bidang pertama, itu adalah bidang nama yang diperlukan, bidang terlihat seperti ini:

Kita ingin memastikan bahwa komentator telah mengisi bidang, dan jika memungkinkan pastikan setidaknya 4 karakter dimasukkan. IYA NIH! tapi bagaimana caranya? Nah ini sangat sederhana, Anda dapat menentukan validasi dengan memanggil kelas. Jadi cukup tambahkan class = 'required'.

Dan WTF berhasil! Jika Anda menekan submit tanpa mengetikkan nama Anda, Anda mendapatkan 'Field ini diperlukan.' Bagus!! Jadi bagaimana jika pengguna tidak memasukkan jumlah karakter minimum?
Kita cukup menambahkan validasi itu dengan menambahkan minlength = '4' ke opsi bidang:

Dan sekarang, ketika Anda memasukkan sesuatu (kurang dari 4 karakter), Anda akan melihat pesan baru muncul "Please enter at least 4 characters.". Jadi itu bekerja dengan sempurna! Minlength memungkinkan Anda untuk mengatur jumlah karakter minimum, cukup ganti nomor ke apa yang Anda anggap perlu.

Langkah 6 - Mail bidang validasi

Selanjutnya kita akan memvalidasi bidang email, jadi beginilah tampilan bidangnya:

Saya tahu apa yang Anda pikirkan, kita melakukan hal yang sama seperti langkah sebelumnya. Nah itu akan salah, karena selain dari bidang yang diperlukan, itu juga harus menjadi alamat email yang valid. Sekarang kita tahu bagaimana mengaturnya diperlukan hanya dengan menambahkan class="required", tetapi bagaimana memvalidasi email? Yah semudah pengaturan itu harus diperlukan, kecuali sekarang kita hanya menambahkan email.

Huh apa? Cukup tambahkan ''email'', sehingga menjadi class="required email", ini membuatnya diperlukan dan memeriksa email yang valid:

Jika Anda mencoba bidang email, Anda akan melihat bahwa itu mengatakan "This field is required." saat dikirim, itu bagus! Dan sekarang ketika Anda memasukkan sesuatu yang tidak format ini: xx@xx.xx itu akan berkata "Please enter a valid email address." sehingga bekerja dengan sempurna! Lihat betapa mudahnya!

Langkah 7 - Validasi bidang situs web

Apakah kita akan memvalidasi bidang situs web? Itu tidak diwajibkan kan? Ya kamu benar! Tetapi kita menginginkan URL yang valid! Jadi kita akan memvalidasi URL, itu semudah validasi sebelumnya tetapi pertama mari kita lihat pada bidang URL:

Sekarang Anda dapat mengaturnya dan mengatur jumlah karakter minimum, tapi saya rasa itu tidak diperlukan untuk bidang ini.
Saya hanya ingin URL yang valid, jadi bagaimana caranya? Kita hanya menambahkan kelas lain tetapi kali ini kita menamakannya class="url", jadi mari tambahkan bahwa:

Dan apa yang Anda ketahui! Saya memasukkan "blabla" di bidang situs web dan langsung mengembalikan "Please enter a valid URL.", Dan ketika saya biarkan kosong itu tidak mengatakan itu diperlukan ketika saya men submitnya.
Jadi itu bekerja sempurna, sama seperti yang saya inginkan! Seperti yang Anda lihat itu sangat mudah berkat jQuery dan Validation Plugin.

Langkah 8 - Komentar bidang validasi

Itu adalah bidang terakhir untuk memvalidasi, sekarang saya tidak suka pesan spam singkat seperti "click me" dan komentar semacam itu, tapi saya juga benci pesan panjang, yang perlu waktu berjam-jam untuk dibaca, atau hanya penuh dengan spam. Jadi saya ingin jumlah minimum dan maksimum karakter. Tapi pertama-tama mari kita periksa bidang komentar:

Nah Anda tahu langkah 1, tambahkan clas yang diperlukan (class="required")  untuk memastikan sesuatu diketik di textarea. Sekarang minimum, Anda ingat kan? (minlength ="'') Sekarang saya pikir setidaknya 10 kata perlu diketik. Jadi itu akan menjadi minlength = '10 ', itu masih semudah itu saja. Tapi sekarang kita ingin mengatur maksimal, tapi bagaimana caranya? Nah plugin memiliki solusi untuk itu, bukannya minlength tambahkan saja maxlength plus jumlah kata. Saya pikir 100 kata cukup sehingga menambah maxlength="100".

MUDAH! Ya saya tahu! Jadi ini adalah bagaimana akan terlihat:

Jadi sekarang, ketika Anda mengirimkan formulir kosong akan mengatakan karena semua bidang lain "This field is required.", Tetapi jika Anda memasukkan kurang dari 10 karakter itu mengatakan "Please enter at least 10 characters." dan jika Anda memasukkan lebih dari 100, kata "Please enter at least 10 characters."! Jadi kita menyelesaikan validasinya !! Tapi itu belum semua, kita masih perlu gaya itu!

Langkah 9 - Formulir styling

Saya tidak tahu tentang Anda, tetapi saya tidak suka bentuknya. Yang berantakan dan kesalahan hanya muncul tanpa gaya. Jadi kita akan atur gaya semuanya sehingga terlihat bagus & bersih, tapi pertama-tama saya ingin mengubah posisi label. Seperti yang Anda lihat sekarang, pertama kali menampilkan "input field" kemudian "error" dan kemudian "field label".

Saya pikir seharusnya terlihat seperti ini "Field label", "input field" dan kemudian "error", untuk melakukan ini kita hanya perlu memindahkan label di atas html. Jadi mari kita ubah field pertama dari:

Menjadi:

Seperti yang Anda lihat, satu-satunya hal yang kita lakukan adalah memindahkan <label> di atas <input>. Ketika Anda sekarang me-refresh halaman komentar Anda, Anda akan melihat bahwa teks "Name (required)" dipindahkan di depan bidang input.
Jadi sekarang ulangi langkah ini untuk semua field input, di akhir seharusnya terlihat seperti ini:

Sekarang seperti yang Anda lihat, semua bidang memiliki label, kecuali bidang komentar, saya pikir itu harus memiliki label. Jadi, lakukan hal yang sama, dan letakkan label di atas bidang input:

Itu tidak terlihat lebih baik, kan? Itu karena kita masih perlu menatanya! Jadi sekarang saatnya membuka file tema CSS. File CSS untuk tema ini dapat ditemukan di "/ wp-content/themes/default/style.css", hanya membuka file ini dan scroll ke bawah.

Oke kita siap untuk mulai styling, tetapi kita ingin memastikan hanya formulir yang terpengaruh oleh CSS ini. Berkat id formulir, kita dapat memastikan ini terjadi. Jadi di depan masing-masing baris CSS kita menambahkan, kita akan memastikan jenis #commentform .classname, hal ini membuat yakin hanya bidang antara<form></form>yang terpengaruh.

Kita pertama akan mulai pada tag label, jadi tambahkan ini ke CSS:

Sekarang kita bisa menerapkan CSS ke label, dengan mengetikkan opsi antara { and }. Jadi pertama mari kita atur lebar, ini adalah berapa banyak ruang yang akan didapat, sekitar 200px harus bagus. Anda masih bisa membaca semua baris dan tidak ada teks yang terpotong.

Sekarang seperti yang Anda lihat, tidak ada yang terjadi. Ini karena kita masih perlu memastikan labelnya tetap ada. Kita bisa menggunakan pelampung untuk ini:

Sekarang itu terlihat lebih seperti itu! Sekarang mari kita gabungkan bidang input dan area teks.
Untuk menerapkan CSS ke bidang-bidang itu kita bisa memanggil mereka menggunakan "input" dan "text area". Jadi mari kita tambahkan itu ditambah sedikit perbatasan:

Sekarang saya ingin semua bidang memiliki panjang yang sama, serta textarea. Jadi kita akan menerapkan lebar tetap, seperti ini:

Langkah 10 - Kesalahan styling

Sekarang ketika Anda menekan submit, Anda akan melihat pesan kesalahan tidak terlihat sangat bagus. Dan saya pikir mereka harus tepat di bawah bidang input. Ketika skrip validasi menghasilkan kesalahan, html akan terlihat seperti ini:

Ini memberitahu kita, kesalahan yang dihasilkan mendapatkan "kesalahan" class, jadi mari kita coba dan memindahkan kesalahan di bawah bidang input.
Ingat label yang lebar 200px, sehingga Anda tahu kita harus margin kiri untuk itu jumlah piksel:

Tapi itu agak biasa jadi mari kita Tambahkan warna latar belakang dan border:

Beberapa hal yang membuatnya terlihat buruk, ukuran font, tidak ada padding (spasi antara teks dan batas abu-abu) dan margin (ruang antara kesalahan dan kolom). Plus akan terlihat jauh lebih bagus jika lebar kesalahannya sama dengan field input, jadi mari coba itu:

Anda dapat melihat bahwa saya menyesuaikan lebar, Anda selalu harus mengubah sedikit hal sehingga semuanya berbaris:

Itu sudah tampak hebat, tapi ada yang kurang! Saya tahu gambar kesalahan! Mari coba ikon famfamfam.

Yah itu tidak benar-benar, saya pikir! Kita harus memindahkan teks ke kanan, kita bisa melakukan ini menggunakan padding-left:

Selalu ingat bahwa penggunaan padding meningkatkan ukuran tetap, jadi kita menerapkan padding 20 piksel ke kiri, yang berarti kita harus mengurangi 20 piksel dari lebar. Jadi itulah mengapa saya mengubah lebar menjadi 209 (229-20)

Dan itu dia! Plugin validasi jQuery sangat mudah digunakan dan diterapkan dan Anda dapat menggunakan teknik ini pada formulir apa pun, bukan hanya formulir komentar WordPress.




Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.