Używam doskonałej wtyczki jQuery Validate do sprawdzania poprawności niektórych formularzy. Na jednym formularzu muszę się upewnić, że użytkownik wypełni przynajmniej jedno z grup pól. Myślę, że mam całkiem dobre rozwiązanie i chciałem się nim podzielić. Zaproponuj wszelkie ulepszenia, o których możesz pomyśleć.
Nie znajdując wbudowanego sposobu, aby to zrobić, przeszukałem i znalazłem niestandardową metodę walidacji Rebecci Murphey , która była bardzo pomocna.
Poprawiłem to na trzy sposoby:
- Aby umożliwić Ci przekazanie selektora dla grupy pól
- Aby umożliwić określenie, ile z tej grupy musi zostać wypełnionych, aby walidacja przebiegła pomyślnie
- Pokazanie wszystkich wejść w grupie jako pozytywnych, gdy tylko jeden z nich przejdzie walidację. (Zobacz odpowiedź dla Nicka Cravera na końcu).
Możesz więc powiedzieć „co najmniej X wejść pasujących do selektora Y musi być wypełnionych”.
Wynik końcowy, z takimi znacznikami:
<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">... to taka grupa reguł:
// 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"]
}Punkt 3 zakłada, że dodajesz klasę .checkeddo komunikatów o błędach po pomyślnej weryfikacji. Możesz to zrobić w następujący sposób, jak pokazano tutaj .
success: function(label) {
label.html(" ").addClass("checked");
}Podobnie jak w powyższej demonstracji, używam CSS, aby nadać każdemu span.errorobraz X jako tło, chyba że ma klasę .checked, w którym to przypadku otrzymuje obraz znacznika wyboru.
Oto mój dotychczasowy kod:
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."));Brawo!
Wykrzyczeć
Teraz do tego okrzyku - pierwotnie mój kod po prostu ślepo ukrywał komunikaty o błędach w innych pasujących polach zamiast ich ponownego sprawdzania, co oznaczało, że jeśli był inny problem (na przykład `` dozwolone są tylko cyfry i wpisałeś litery '') , został ukryty, dopóki użytkownik nie próbował go przesłać. Stało się tak, ponieważ nie wiedziałem, jak uniknąć pętli opinii, o której mowa w komentarzach powyżej. Wiedziałem, że musi istnieć sposób, więc zadałem pytanie , a Nick Craver oświecił mnie. Dzięki, Nick!
Pytanie rozwiązane
Pierwotnie było to pytanie typu „pozwól mi się tym podzielić i zobaczę, czy ktoś może zasugerować ulepszenia”. Chociaż nadal chciałbym otrzymywać opinie, myślę, że w tym momencie jest całkiem kompletny. (Może być krótszy, ale chcę, aby był łatwy do odczytania i niekoniecznie zwięzły). Po prostu baw się!
Aktualizacja - teraz część walidacji jQuery
Zostało to oficjalnie dodane do walidacji jQuery w dniu 03.04.2012.