Jquery Validation Plugin Method required( dependency-expression ) use ok but callback not working

Question

Hi all, i'm trying to make this work; this validate is applied to a payment form, and as you can see, there are only 3 requierd inputs, if and only if

input[type=radio]:checked').val() != "CB";

wich means if user is about to pay with something else than a credit card. Following is the complete code to validate my form.

$("#paiement").validate({
        errorClass: "invalid",
        validClass: "success",
        rules: {
            referenceTypeComplementBancaire: true,
            banque: {
                required: function(nomBanque){
                    return $('#paiement input[type=radio]:checked').val() != "CB";
                }
            },
            numeroComplementBancaire: {
                required: function(numeroCompl){
                    return $('#paiement input[type=radio]:checked').val() != "CB";
                }  
            },
            montantComplementBancaire: {
                required: function(montantCompl){
                    var logg = montantRentre >= panierTotal;
                    console.log(logg);
                    return montantRentre >= panierTotal;
                }
            }
        },
        messages: {
         referenceTypeComplementBancaire: "",
         banque:"",
         numeroComplementBancaire:"",
         montantComplementBancaire:""
        }
    });
}

Nothing hard, really. But, whats hard for me to understand is why montantComplementBancaire isn't validated, even if my console logging shows me 'true' or 'false' in the right time. What a m I doing wrong ?

----------------------------EDIT------------------------------------------

I think there's been some kind of misunderstanding, my fault. Sorry folks. Here's how the form finally looks like:

        $("#paiement").validate({
        errorClass: "invalid",
        validClass: "success",
        rules: {
            referenceTypeComplementBancaire: true,
            banque: {
                required: function(nomBanque){
                    return $('#paiement input[type=radio]:checked').val() != "CB";
                }
            },
            numeroComplementBancaire: {
                required: function(numeroCompl){
                    return $('#paiement input[type=radio]:checked').val() != "CB";
                }  
            },
            montantComplementBancaire: {
                required: function(){
                    var logg = panierTotal > montantRentre; 
                    console.log(logg); 
                    return panierTotal > montantRentre; 
                }
            }
        },
        messages: {
         referenceTypeComplementBancaire: "",
         banque:"",
         numeroComplementBancaire:"",
         montantComplementBancaire:""
        }
    });

Where did I go wrong ? Not only do I want "montantComplementBancaire" to be validated, but I want it to be valid IF and ONLY IF its >= to panierTotal

Right now, I'm only testing wether or not to validate it, but what I'm looking for is a way to return 'valid' when montantRentre >= to panierTotal .

Am I making tjis any clearer ?

Answer 1

try return logg; or return (montantRentre >= panierTotal);

Your code looks ok and seems to match the example here (http://docs.jquery.com/Plugins/Validation/Methods/required#dependency-callback). The required property doesn't need to be an object with a depends property, it can be a dependency-callback function like you have done.

You could also try

if(montantRentre >= panierTotal) {
  return true;
} else {
  return false;
}

Answer 2

I don't think your validation is setup properly. The "required" property of each form element should be a JavaScript Object with the "depends" property set to a function, presuming what you're trying to do is conditional requirements. See the "rules" entry on the validation options page: http://docs.jquery.com/Plugins/Validation/validate#toptions

I think the fixed code would be:

$("#paiement").validate({
    errorClass: "invalid",
    validClass: "success",
    rules: {
            referenceTypeComplementBancaire: 'required',
            banque: {
                    required: {
                        depends: function(nomBanque){
                            return $('#paiement input[type=radio]:checked').val() != "CB";
                        }
                    }
            },
            numeroComplementBancaire: {
                    required: {
                        depends: function(numeroCompl){
                            return $('#paiement input[type=radio]:checked').val() != "CB";
                        }  
                    }
            },
            montantComplementBancaire: {
                    required: {
                        depends: function(montantCompl){
                            var logg = montantRentre >= panierTotal;
                            console.log(logg);
                            return montantRentre >= panierTotal;
                        }
                    }
            }
    },
    messages: {
     referenceTypeComplementBancaire: "",
     banque:"",
     numeroComplementBancaire:"",
     montantComplementBancaire:""
    }
    });
}

Answer 3

required: function(montantCompl){ 
    var logg = montantRentre >= panierTotal; 
    console.log(logg); 
    return montantRentre >= panierTotal; 
}

why do you define an argument function(montantCompl){ that you never use? Did you mean to actually make your comparison against that? Even if you didn't, it is not really a good idea to use global variables for comparison inside anonymous functions as it leads to ambiguity, like right now when I'm trying to help you out with your issue. If these values are defined somewhere, please includ them in your question including any points where they change state.