I'm using the JQuery validate plug-in to validate my form. I have 4 fields that are related: ev_start, ev_end, ev_starttime and ev_endtime. The first two are dates, are required, and ev_end must be after ev_start. The second two are times and may or may not be required, but ev_endtime must be after ev_starttime if they are entered.
If I change an incorrect ev_endtime or ev_end the field is revalidated based on its dependencies as required. But if I change an ev_start or an ev_starttime, the dependent ev_end or ev_endtime is not revalidated. How do I fix this?
My rules look like this:
rules: {
ev_start: { dateCan: true, required: true},
ev_end:{ dateCan: true,
minDate: ":input[name='ev_start']"
},
ev_starttime:{
required:
function(element){
return $("input[name='allday']:unchecked")
},
time: true
},
ev_endtime:{
required:
function(element){
return $("input[name='allday']:unchecked")
},
time: true,
minTime: {
depends: function(element) {
return $("input[name='ev_start']").valid()
&& $("input[name='ev_end']").valid()
&& $("input[name='ev_starttime']").valid()
&& $("input[name='ev_start']").val()==$("input[name='ev_end']").val()
},
param: ":input[name='ev_starttime']"
}
}
}
dateCan is a custom rule that checks for 'YYYY-mm-dd' date format. minDate and minTime make sure that dates and times are in the correct order. All of this works.