2011-12-16 12 views
9

Quindi la situazione è questa: tentare di aggiungere una casella a cascata utilizzando il plug-in jquery.multiselect in un modulo che attualmente utilizza il plug-in jquery.validate con altri campi (campi di immissione testo, input di testo singolo con intervallo di valori float) che tutti attualmente convalidano correttamente.Come utilizzare jquery.Validate con un menu a discesa jquery.multiselect?

Quando tento di aggiungere regole di convalida, semplicemente non posso ottenere jquery.validate per convalidare il mio menu a discesa multiselect. Qui ci sono frammenti di mio codice (tutto presuppone che i plugin necessari sono caricati - vedi sotto per versioni utilizzate):

Il codice 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> 

Il 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' 
    }); 
}); 

Versioni Se c'è un problema esplicito/noto con la compatibilità tra le versioni, allora potrei aggiornare de se questo risolve il problema, ma ho provato a utilizzare le versioni più recenti per i miei scopi e non sembra aver risolto il mio problema.

jQuery: 1.4.4

jquery.validate: 1.9.0

jquery.multiselect: 1.8

E, come sempre, posso fornire maggiori informazioni in cui possibile/necessaria.

risposta

12

Così sembra che le regole sono stato insediano per la selezione multipla sono stati davvero di essere attaccati alla selezione, tuttavia, poiché la casella di selezione originale è :hidden per jquery.multiselect, jquery.validate ignora per impostazione predefinita qualsiasi input nascosto.

La soluzione (che non è la mia, trovata da un collega) consiste nell'utilizzare le impostazioni ignore per jquery.validate. Qualunque sia il selettore è passato con l'impostazione ignore viene messo in un jquery .not(), quindi la soluzione è in realtà di utilizzare una doppia negazione qui:

$('#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' 
}); 

Accidenti!

+0

Mi hai davvero aiutato! :) –

+1

Il motivo per cui cerco sempre di pubblicare i miei problemi e le soluzioni per loro - lieto di aver aiutato! :) – Mattygabe

+0

Mi hai aiutato, tre! Come hai detto, "Phew" – HPWD

0

Mi sembra che le due opzioni selezionate contengano un valore.

value="some_val1" 

Prova ad aggiungere un'opzione in alto con un valore di niente e selezionati:

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

Questo non risolve il problema. – Mattygabe

0

Un'altra possibile soluzione è quella di specificare in modo esplicito gli elementi per convalidare:

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

che convaliderà il nascosto selezionare pure.

In realtà, la situazione ho appena incontrato non c'era altra strada da quando ho voluto convalidare con una parte di una forma più fasi:

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

Speranza che aiuta qualcuno

Problemi correlati