How do I retrieve the parameter from the data attribute with conditional validation?

Question

I am trying to add a conditional validator to some code. It basically works except for one thing: I need to retrieve the parameter from the html attribute instead of from within the jquery code. I haven't been able to figure out how to do this. Currently my code seems to send the result of the return statement in the "depends" section of code as the parameter to the 'genrule' section. So, 'genrule' is receiving 'true' instead of '50' or '500' from the data attributes.

Here is the link to the jsfiddle I've been working in: http://jsfiddle.net/iceape/9eyy2h1f/5/

The embedded code below doesn't seem to execute.

 $.validator.addMethod('genrule', function(value, element, param) { console.log("addmethod: " + param + " " + param[0] + " " + param[1]); console.log("value: " + value); return (value >= param); }); $('#test').validate({ debug: true, rules: { foo: { required: true, genrule: { depends: function(element) { console.log("bar: " + $('#bar').val()); return ($('#bar').val() === "0"); } } }, bar: { required: true, genrule: { depends: function(element) { return ($('#foo').val() === "0"); } } } }, submitHandler: function(form) { alert('Success'); return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <form id="test"> <input id="foo" name="foo" type="text" data-rule-genrule="500" data-msg-genrule="If bar is 0, then foo must be >= 500" /> <br/> <input id="bar" name="bar" type="text" data-rule-genrule="50" data-msg-genrule="If foo is 0, then bar must be >= 50" /> <br/> <input type="submit" /> </form> 

Edit: Final working code on JSFiddle: http://jsfiddle.net/iceape/9eyy2h1f/

Final working code on SO:

 $.validator.addMethod('genrule', function(value, element, param) { return (value >= param); }); $('#test').validate({ rules: { foo: { required: function(element) { return $.trim($('#bar').val()).length === 0; }, genrule: { param: $('#foo').data('rule-genrule'), depends: function(element) { return ($.trim($('#foo').val()).length > 0); } } }, bar: { required: function(element) { return $.trim($('#foo').val()).length === 0; }, genrule: { param: $('#bar').data('rule-genrule'), depends: function(element) { return ($.trim($('#bar').val()).length > 0); } } } }, submitHandler: function(form) { alert('Success'); return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <form id="test"> <input id="foo" name="foo" type="text" data-rule-genrule="500" data-msg-genrule="Foo must be >= 500" /> <br/> <input id="bar" name="bar" type="text" data-rule-genrule="50" data-msg-genrule="Bar must be >= 50" /> <br/> <input type="submit" /> </form> 

Answer 1

genrule is receiving true instead of 50 or 500 from the data attributes.

You can declare rules for this plugin several ways, various kinds of inline attributes or through one of the plugin's methods. However, you cannot do both simultaneously, and the rules object within the .validate() method will always take precedence over any inline attributes.

You're always getting a boolean for your genrule parameter, because you're sending a boolean here...

rules: {
    foo: {
        genrule: {
            depends: function(element) {
                return ($('#bar').val() === "0");  // <- this is your "genrule" `param`
                ....

Instead, just send 500 when it's true ...

rules: {
    foo: {
        genrule: {
            param: 500,
            depends: function(element) {
                return $('#bar').val() === "0");  
            }

Alternatively, you can grab the value of the data attribute using the .data() method .

rules: {
    foo: {
        genrule: {
            param: $('#foo').data('rule-genrule'), // value of `data-rule-genrule`
            depends: function(element) {
                return ($('#bar').val() === "0");
            }
            ....

---

I also see a misunderstanding here...

console.log("addmethod: " + param + " " + param[0] + " " + param[1]);

You are not going to have a param[0] , param[1] , etc., because your param is simply a single parameter of 500 or 50 . Your param would need to look something like [10,100] in order to send multiple parameters into the custom rule.