[jQuery Validate Plugin] Optional field programatically set to "" fails validation
jQuery v1.4.2
jQuery Validate v1.7
I have two dropdowns - one for a month and another for year. When either dropdown changes, a hidden field is updated to a date in the from yyyy/mm/dd.
I have the validation set up so that either both dropdowns must contain a value, or neither one may contain a value.
If both dropdowns are blank, the hidden field is set to an empty string ("").
I have a custom validation rule on the hidden field that the date must be after today.
However, it fails this rule without displaying an error. I followed the code thru, and it looks like the optional() method is returning "dependency-mismatch", which is causing my custom method to return "dependency-mismatch" even though it's "valid".
Help? What does "dependency-mismatch" mean?
Here is the HTML:
<select name="avail_month" id="avail_month" class="month">
<option value=""></option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="avail_year" id="avail_year" class="year">
<option value=""></option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<input name="avail_date" id="avail_date" value="2011/02/01" type="hidden">
</dd>
Here are my validation rules:
rules : {
avail_month : {
required : {
depends : function(element) {
return ($("#avail_year").val() !== "");
}
}
},
avail_year : {
required : {
depends : function(element) {
return ($("#avail_month").val() !== "");
}
}
},
avail_date : "afterToday"
}
Here is my custom "afterToday" rule:
$.validator.addMethod("afterToday",
function(value, element) {
var date, now, valid;
if ($.trim(value) === "") {
valid = true;
} else {
date = new Date(value);
if (isNaN(date)) {
valid = false;
} else {
now = new Date();
valid = (date > now);
} // if-else (isNaN(date))
} // if-else ($.trim(value) === "")
return this.optional(element) || valid;
}, "Please choose a date after today." // Validation/Methods/afterToday
);