2011-11-24 6 views
16

Estoy usando el jQuery validation plugin y quiero hacer uso de un método personalizado que toma dos de los valores ingresados ​​en dos cuadros de texto diferentes en cuenta al decidir si la situación es válida.jquery-validate - addMethod - ¿cómo aplicar reglas personalizadas haciendo referencia a dos cuadros de texto?

que sé sobre add method y he encontrado un ejemplo ...

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}")); 

... que hace referencia a dos elementos, pero no me queda claro cómo escribir una regla que haría uso de un método como esto ?

Para que sea más fácil hablar de imaginar que yo quiero hacer uso de este método de ejemplo y tengo una forma que se parece a esto ..

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

Tengo otras reglas que aplico de esta manera:

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

¿Cómo puedo hacer algo similar para aplicar el método personalizado de ejemplo se muestra de manera que 'total' se comprueba como la suma de 'LHSOPERAND' y 'RHSOPERAND'.

Respuesta

34

intente lo siguiente:

crear la regla

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 }; 

entrada

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

Init Validación

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

Fiddle aquí: http://jsfiddle.net/wTMv3/

+1

Justo lo que quería. Muchas gracias. – shearichard

+1

Gracias por una respuesta tan completa. Solo para completar un poco más: 'jQuery.validator.classRuleSettings.className = {methodName: true};' – Fernando

+0

¿Qué ocurre si quiero agregar dos de estos métodos simultáneamente? – partho

Cuestiones relacionadas