jQuery validation fails when using .element(element) within custom method

3
votes

I have a custom rule that should check some dependencies by validating the other inputs this one depends on. When I do stuff like that validation for all other inputs seems to be ignored.

This one is my custom validation rule:

jQuery.validator.addMethod("checkDependencies", function (value, element) {
  var valid1 = jQuery('form#add-lottery-form').validate().element('#input-1');
  var valid2 = jQuery('form#add-lottery-form').validate().element('#input-2');

  if (valid1 && valid2) {
    return true;
  } else {
    return false;
  }

}, 'dependencie error');

I have created a jsfiddle to show my problem:
http://jsfiddle.net/AQcrW/

steps to reproduce:

  1. type something in input4 (this input is the one with custom rule "checkDependencies") [line 1 in JavaScript-part]
  2. errors on input1 and input2 are shown due to calls in JS line 2 and line 3
  3. insert correct values to input1 and input2
  4. click submit
  5. !!recognize that input3 was not validated!!

rerun the fiddle

  1. click submit
  2. all fields are validated as expected

Is this my fault or is it a bug in jQuery validation?

1
javascriptjqueryvalidationjquery-validate
@salexch does it work for you? for me it doesn't.. jsfiddle.net/6Qt8c i mean are you able to get the error message "dependencie error"? – chsymann
Yes. jsfiddle.net/AQcrW/3 I changed rules, pls see.. Still its not working correctly.. Validation Test input 1 tyr input 2 ytr Please enter only digits. input 3 ytr Please enter only digits. input 4 645 dependencie error – salexch

1 Answers

1
votes

After some debugging and overview the plugins code i have a solution for my problem. I extended the validator plugin to be able to call the internal .check(element) function. this function just returns true/false. Its not a perfect solution because it does some stuff twice on form submit but at least it works so far.. so here is the code I added:

no need for the code - read edit! 

jQuery.extend(jQuery.validator.prototype, {
    check: function (element)
    {
        return this.check(element);
    }
});

and here is the working fidde:
http://jsfiddle.net/HrPRL/

to follow my thoughts and maybe check out upcoming discussion:
https://github.com/jzaefferer/jquery-validation/issues/579

Edit:
As i realized right now my pretty cool jQuery extend doesn't have any effect..
because the .check() method is part of the prototype object you can access it already. So the code above is not needed.

Edit 2:
this is what I ended up with. It's working but I think some stuff could be optimized.
any better ideas to do it?
http://jsfiddle.net/HrPRL/6/
i am done.. thats enough for my intention: http://jsfiddle.net/HrPRL/8/