2011-11-24 17 views
16

Sto utilizzando lo jQuery validation plugin e voglio utilizzare un metodo personalizzato che prende in considerazione due valori immessi in due diverse caselle di testo quando si decide se la situazione è valida.jquery-validate - addMethod - come applicare una regola personalizzata facendo riferimento a due caselle di testo?

che so di add method e ho trovato un esempio ...

jQuery.validator.addMethod("math", function(value, element, params) { 
return this.optional(element) || value == params[0] + params[1]; 
}, jQuery.format("Please enter the correct value for {0} + {1}")); 

... che fa riferimento a due elementi, ma non mi è chiaro come scrivere una norma che renderebbe l'uso di un metodo come questo ?

Per rendere più facile per discutere immaginare che voglio fare uso di questo metodo esempio, e ho una forma che assomiglia a questo ..

<form id="TOTALSFORM" name="TOTALSFORM"> 
    <label for="LHSOPERAND">Input 1</label> 
    <br /> 
    <input type="text" name="LHSOPERAND" id="LHSOPERAND" class="required" /> 
    <br /> 
    <label for="RHSOPERAND">End</label> 
    <br /> 
    <input type="text" name="RHSOPERAND" id="RHSOPERAND" class="required" /> 
    <label for="TOTAL">End</label> 
    <br /> 
    <input type="text" name="TOTAL" id="TOTAL" class="required" /> 
</form> 

ho altre regole che io applico in questo modo:

$("#OPTREASON").rules("add", { 
    required: true, 
    min: 0, 
    messages: { 
     required: "Required input", 
     min: "Please select a Reason" 
    } 
}); 

come posso fare qualcosa di simile ad applicare il metodo esempio personalizzato mostrato in modo che 'TOTALE' è selezionata come la somma di 'LHSOPERAND' e 'RHSOPERAND'.

risposta

34

provare quanto segue:

creare la regola

jQuery.validator.addMethod("checkTotal",function(value) { 
    total = parseFloat($('#LHSOPERAND').val()) + parseFloat($('#RHSOPERAND').val()); 
    return total == parseFloat($('#TOTAL').val()); 
}, "Amounts do not add up!"); 

jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true }; 

ingresso

<input type="text" name="TOTAL" id="TOTAL" class="required checkTotal" /> 

Init convalida

$(document).ready(function() { 
    $("#TOTALSFORM").validate(); 
}); 

Fiddle qui: http://jsfiddle.net/wTMv3/

+1

Proprio quello che volevo. Grazie mille. – shearichard

+1

Grazie per una risposta così completa. Solo per completare un po 'di più: 'jQuery.validator.classRuleSettings.className = {methodName: true};' – Fernando

+0

E se volessi aggiungere due di questi metodi contemporaneamente? – partho

Problemi correlati