Bazı formları doğrulamak için mükemmel jQuery Validate Eklentisini kullanıyorum . Bir formda, kullanıcının bir grup alandan en az birini doldurduğundan emin olmam gerekiyor. Sanırım oldukça iyi bir çözümüm var ve bunu paylaşmak istedim. Lütfen aklınıza gelebilecek iyileştirmeleri önerin.
Bunu yapmanın yerleşik bir yolunu bulamayınca, Rebecca Murphey'in özel doğrulama yöntemini araştırdım ve buldum , bu çok yardımcı oldu.
Bunu üç şekilde geliştirdim:
- Alan grubu için bir seçiciye geçmenize izin vermek için
- Doğrulamanın geçmesi için o gruptan kaçının doldurulması gerektiğini belirtmenize izin vermek için
- Gruptaki tüm girdileri, biri doğrulamayı geçer geçmez geçerliliğini geçerken göstermek için. ( Sonunda Nick Craver'a seslenmeye bakın .)
Yani "Y seçici ile eşleşen en az X girişi doldurulmalıdır" diyebilirsiniz .
Bunun gibi işaretlemeyle sonuç:
<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">... bunun gibi bir kural grubudur:
// 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"]
}Öğe # 3 .checked, başarılı doğrulama sonrasında hata mesajlarınıza bir sınıf eklediğinizi varsayar . Bunu aşağıda gösterildiği gibi yapabilirsiniz .
success: function(label) {
label.html(" ").addClass("checked");
}Yukarıda bağlantısı verilen demoda span.errorolduğu gibi, sınıfa sahip olmadığı sürece her X görüntüsünü arka planı olarak vermek için CSS kullanıyorum .checked, bu durumda bir onay işareti görüntüsü alır.
İşte şimdiye kadarki kodum:
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."));Yaşasın!
Haykırmak
Şimdi bu haykırış için - başlangıçta, kodum hata mesajlarını yeniden doğrulamak yerine diğer eşleşen alanlara körü körüne gizledi, bu da başka bir sorun varsa ('sadece sayılara izin verilir ve harfleri girmişsiniz' gibi) anlamına gelir. , kullanıcı göndermeyi deneyene kadar gizlendi. Bunun nedeni, yukarıdaki yorumlarda belirtilen geri bildirim döngüsünden nasıl kaçınacağımı bilmiyordum. Bir yolu olması gerektiğini biliyordum, bu yüzden bir soru sordum ve Nick Craver beni aydınlattı. Teşekkürler Nick!
Soru Çözüldü
Bu aslında "bunu paylaşmama izin verin ve iyileştirme önerebilecek biri var mı görelim" türü bir soruydu. Geri bildirimi yine de memnuniyetle karşılıyor olsam da, bu noktada oldukça tamamlandığını düşünüyorum. (Daha kısa olabilir, ancak okumasının kolay olmasını ve özlü olmasını istemiyorum.) Bu yüzden keyfini çıkarın!
Güncelleme - artık jQuery Doğrulamanın bir parçası
Bu resmi olarak 4/3/2012 tarihinde jQuery Doğrulaması'na eklendi .