Reputation: 22964
I'm having a problem with jQuery validation conditional rules.
I specify a conditional rule for an element as such:
var validatorSettings = $("form").data('validator').settings;
validatorSettings.rules = $.extend({}, validatorSettings.rules, {
TimeFrameAmount: {
number: function() { return $("select[name='TimeFrameUnits']").val() === "true"; },
required: function() { return $("select[name='TimeFrameUnits']").val() === "true" } ;
}
});
Problem is when I submit the form, $("form").valid()
returns 0.
I traced is down to see that $("input[name='TimeFrameAmount']").valid()
is the only element in the form that returns 0 and thus is the element causing the form to fail validation.
I further traced this down that $("input[name='TimeFrameAmount']").valid()
always returns 0 and causes the form to fail validation even if the conditional rule functions both return false.
I checked this by setting a break point in the conditional rule functions, then triggered a call to $("input[name='TimeFrameAmount']").valid()
from the Firefox console.
My conditional rules both return false and $("input[name='TimeFrameAmount']").valid()
still returns 0 and the form fails validation.
One thing to note is that the errorPlacement
callback in not fired when my conditional rules return false, which makes sense since no validation = no errors.
In fact, the input even has the "valid" class at the time I validate the form (and still has it after)
However, neither of those things prevent the valid()
method from returning that 0
Any ideas how to get the form to pass validation?
Upvotes: 0
Views: 976
Reputation: 4976
Turns out the correct syntax to add conditional rules are:
TimeFrameAmount: {
required: {
depends : function () {
//check conditionality
}
}
}
Upvotes: 1