Saya menggunakan Plugin jQuery Validate yang sangat baik untuk memvalidasi beberapa formulir. Pada satu formulir, saya perlu memastikan bahwa pengguna mengisi setidaknya satu dari sekelompok bidang. Saya rasa saya punya solusi yang cukup bagus, dan ingin membagikannya. Harap sarankan perbaikan apa pun yang dapat Anda pikirkan.
Karena tidak menemukan cara bawaan untuk melakukan ini, saya mencari dan menemukan metode validasi khusus Rebecca Murphey , yang sangat membantu.
Saya meningkatkan ini dengan tiga cara:
- Untuk membiarkan Anda meneruskan pemilih untuk grup bidang
- Untuk membiarkan Anda menentukan berapa banyak dari grup itu yang harus diisi agar validasi lulus
- Untuk menampilkan semua input dalam grup sebagai lolos validasi segera setelah salah satunya lolos validasi. (Lihat teriakan untuk Nick Craver di bagian akhir.)
Jadi bisa dibilang "setidaknya X masukan yang cocok dengan pemilih Y harus diisi."
Hasil akhirnya, dengan markup seperti ini:
<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">... adalah sekelompok aturan seperti ini:
// Both these inputs input will validate if
// at least 1 input with class 'productinfo' is filled
partnumber: {
require_from_group: [1,".productinfo"]
}
description: {
require_from_group: [1,".productinfo"]
}Item # 3 mengasumsikan bahwa Anda menambahkan kelas .checkedke pesan kesalahan Anda setelah validasi berhasil. Anda dapat melakukan ini sebagai berikut, seperti yang ditunjukkan di sini .
success: function(label) {
label.html(" ").addClass("checked");
}Seperti pada demo yang ditautkan di atas, saya menggunakan CSS untuk memberikan setiap span.errorgambar X sebagai latar belakangnya, kecuali jika ia memiliki kelasnya.checked , dalam hal ini gambar itu mendapat gambar tanda centang.
Inilah kode saya sejauh ini:
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
//Look for our selector within the parent form
var validOrNot = $(selector, element.form).filter(function() {
// Each field is kept if it has a value
return $(this).val();
// Set to true if there are enough, else to false
}).length >= numberRequired;
// The elegent part - this element needs to check the others that match the
// selector, but we don't want to set off a feedback loop where each element
// has to check each other element. It would be like:
// Element 1: "I might be valid if you're valid. Are you?"
// Element 2: "Let's see. I might be valid if YOU'RE valid. Are you?"
// Element 1: "Let's see. I might be valid if YOU'RE valid. Are you?"
// ...etc, until we get a "too much recursion" error.
//
// So instead we
// 1) Flag all matching elements as 'currently being validated'
// using jQuery's .data()
// 2) Re-run validation on each of them. Since the others are now
// flagged as being in the process, they will skip this section,
// and therefore won't turn around and validate everything else
// 3) Once that's done, we remove the 'currently being validated' flag
// from all the elements
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
// .valid() means "validate using all applicable rules" (which
// includes this one)
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));Hore!
Teriak
Sekarang untuk teriakan itu - awalnya, kode saya hanya secara membabi buta menyembunyikan pesan kesalahan di bidang lain yang cocok alih-alih memvalidasinya ulang, yang berarti bahwa jika ada masalah lain (seperti 'hanya angka yang diizinkan dan Anda memasukkan huruf') , itu disembunyikan sampai pengguna mencoba mengirim. Ini karena saya tidak tahu bagaimana menghindari loop umpan balik yang disebutkan dalam komentar di atas. Saya tahu pasti ada jalan, jadi saya mengajukan pertanyaan , dan Nick Craver mencerahkan saya. Terima kasih, Nick!
Pertanyaan Terselesaikan
Ini awalnya adalah pertanyaan semacam "biarkan saya berbagi ini dan melihat apakah ada yang bisa menyarankan perbaikan". Meskipun saya masih menerima umpan balik, saya pikir itu cukup lengkap untuk saat ini. (Bisa lebih pendek, tapi saya ingin mudah dibaca dan belum tentu ringkas.) Jadi nikmatilah!
Perbarui - sekarang menjadi bagian dari jQuery Validation
Ini secara resmi ditambahkan ke jQuery Validation pada 4/3/2012.