Jak korzystać z jquery.Validate z rozwijanym menu jquery.multiselect?

Question

Sytuacja wygląda tak: próba dodania listy rozwijanej za pomocą wtyczki jquery.multiselect w formularzu, który obecnie używa wtyczki jquery.validate, która ma inne pola (pola wprowadzania tekstu, wprowadzanie pojedynczego tekstu o zakresie wartości float), które wszystkie obecnie sprawdzane. prawidłowo.

Kiedy próbuję dodać reguły sprawdzania poprawności, po prostu nie mogę uzyskać jquery.validate, aby sprawdzić poprawność listy rozwijanej multiselect. Oto fragmenty mojego kodu (wszystko zakłada, że ​​wymagane wtyczki są załadowane - patrz niżej wersjach używany):

HTML:

<form action="some/action" id="myForm" method="POST"> 
    Input 1: <input type="text" value="" name="input1" maxlength="200" id="input1"><br/> 
    Input 2: <input type="text" value="" name="input2" maxlength="100" id="input2"><br/> 
    Input 3: <input type="text" value="" name="input3" maxlength="50" id="input3"><br/> 
    Select: <select class="someSelect" name="mySelect" id="mySelect" multiple="multiple"> 
     <option value="some_val1">Some Value</option> 
     <option value="some_val2">Some Other Value</option> 
    </select> 
    <input type="submit" value="Submit" /> 
</form> 

javascript:

$(document).ready(function() { 
    $('#mySelect').multiselect({ 
     noneSelectedText: 'Select Something (required)', 
     selectedList: 3, 
     classes: 'my-select' 
    }); 

    $.validator.addMethod("needsSelection", function(value, element) { 
     return $(element).multiselect("getChecked").length > 0; 
    }); 

    $.validator.addMethod("isPercent", function(value, element) { 
     return parseFloat(value) >= 0 && parseFloat(value) <= 100; 
    }); 

    $.validator.messages.needsSelection = 'You gotta pick something.'; 
    $.validator.messages.isPercent = 'Must be between 0% and 100%'; 

    $('#myForm').validate({ 
     rules: { 
      mySelect: "required needsSelection", 
      input1: "required isPercent", 
      input2: "required", 
      input3: "required" 
     }, 
     errorClass: 'invalid' 
    }); 
}); 

Wersje Jeśli istnieje wyraźny/znany problem z kompatybilnością między wersjami, wówczas mogę upgra de, jeśli to rozwiąże problem, ale przetestowałem używając najnowszych wersji do moich celów i nie rozwiązało to mojego problemu.

jQuery: 1.4.4

jquery.validate: 1.9.0

jquery.multiselect: 1.8

I, jak zawsze, mogę podać więcej informacji, gdzie możliwe/potrzebne.

Answer 1

Wydaje się więc, że zasady I chyliło się na wielokrotny były rzeczywiście jest przymocowany do select, jednak ponieważ oryginalne pole wyboru to :hidden przez jquery.multiselect, jquery.validate domyślnie ignoruje wszelkie ukryte dane wejściowe.

Rozwiązaniem (które nie należy do mnie - współpracownik je znalazł) jest użycie ustawień ignore dla jquery.validate. Cokolwiek selektor jest przekazywana z ustawieniem ignore wkłada się jQuery .not(), więc rozwiązanie jest rzeczywiście w użyciu podwójnie negatywny tutaj:

$('#myForm').validate({ 
    rules: { 
     mySelect: "required needsSelection", 
     input1: "required isPercent", 
     input2: "required", 
     input3: "required" 
    }, 
    ignore: ':hidden:not("#mySelect")', //Tells it to check the hidden select 
    errorClass: 'invalid' 
}); 

Uff!

Answer 2

Wygląda na to, że dwie wybrane opcje mają wartość.

value="some_val1" 

Spróbuj dodać opcję na górze o wartości niczego i wybrani:

<option selected="" value="">Please Select Something</option> 

Answer 3

Innym możliwym rozwiązaniem jest jednoznacznie określić elementy do sprawdzania poprawności:

$("form").children("input, select, textarea").valid() 

To zweryfikuje ukryty wybrać również.

W rzeczywistości sytuacja Właśnie spotkałem nie było innego sposobu, ponieważ chciałem, aby potwierdzić przez część do wieloetapowej postaci:

$("form").find("[data-stepIndex='1']").children("input, select, textarea").valid() 

Nadzieja pomaga ktoś