web-dev-qa-db-fra.com

jquery-validate - addMethod - comment appliquer une règle personnalisée référençant deux zones de texte?

J'utilise plugin de validation jQuery et je veux utiliser une méthode personnalisée qui prend en compte deux valeurs entrées dans deux zones de texte différentes pour décider si la situation est valide.

Je connais ajouter une méthode et j'ai trouvé un exemple ...

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

... qui fait référence à deux éléments mais je ne sais pas comment écrire une règle qui utiliserait une méthode comme celle-ci?

Pour faciliter la discussion, imaginez que je veux utiliser cet exemple de méthode et j'ai un formulaire qui ressemble à ceci ..

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

J'ai d'autres règles que j'applique comme ceci:

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

Comment puis-je faire quelque chose de similaire pour appliquer l'exemple de méthode personnalisée montré afin que "TOTAL" soit vérifié comme étant la somme de "LHSOPERAND" et "RHSOPERAND".

jqueryjquery-validate
17
shearichard

Essayez ce qui suit:

Créer la règle 

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

Entrée 

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

Validation init 

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

Violon ici: http://jsfiddle.net/wTMv3/

36
dSquared