Hi, I'm using this jQuery validationEngine but I'm having a problem validating input fields which are transformed using Jonathan Leighton's datepicker. I need to validate that two dates are the same, so i have a custom callback (validateDOB) to check this. When I run this callback in the firebug console it correctly tests the values against each other, but the callback isn't triggered with the validation engine. I am not sure if i am missing something obvious here.
This is the order I load my js files, then my instantiation calls and the callback:
<script type="text/javascript" src="http://localhost/httpdocs/media/js/jquery.js"></script>
<script type="text/javascript" src="http://localhost/httpdocs/media/js/jquery.date_input.js"></script>
<script type="text/javascript" src="http://localhost/httpdocs/media/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="http://localhost/httpdocs/media/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="http://localhost/httpdocs/media/js/jtip.js"></script>
<script type = "text/javascript">
function validateDOB () {
if($("#dob_section .date").val() == $("#confirm_dob_section .date").val()) {
return true;
}else{
return false;
}
}
$(document).ready(function() {
//load datepicker
$(".date").date_input();
//init validation
$("form").validationEngine();
});
</script>
The failure of the validation seems to be purely down to the fact that the datepicker is converting the input field as follows (apologies if this is a lot of code, thought it could be useful to show)
<input id="dob" name="dob" value="No date selected" class="validate[required] date" type="text">
<div style="display: none; top: 528.067px; left: 680.5px;" class="date_selector">
<div class="nav">
<p class="month_nav">
<span class="button prev" title="[Page-Up]">«</span>
<span class="month_name">April</span>
<span class="button next" title="[Page-Down]">»</span>
</p>
<p class="year_nav">
<span class="button prev" title="[Ctrl+Page-Up]">«</span>
<span class="year_name">2010</span>
<span class="button next" title="[Ctrl+Page-Down]">»</span>
</p>
</div>
<table>
<thead>
<tr>
<th>
Mon
</th>
<th>
Tue
</th>
<th>
Wed
</th>
<th>
Thu
</th>
<th>
Fri
</th>
<th>
Sat
</th>
<th>
Sun
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="unselected_month" date="29 Mar 2010">
29
</td>
<td class="unselected_month" date="30 Mar 2010">
30
</td>
<td class="unselected_month" date="31 Mar 2010">
31
</td>
<td class="selectable_day" date="1 Apr 2010">
1
</td>
<td class="selectable_day" date="2 Apr 2010">
2
</td>
<td class="selectable_day" date="3 Apr 2010">
3
</td>
<td class="selectable_day" date="4 Apr 2010">
4
</td>
</tr>
<tr>
<td class="selectable_day" date="5 Apr 2010">
5
</td>
<td class="selectable_day" date="6 Apr 2010">
6
</td>
<td class="selectable_day" date="7 Apr 2010">
7
</td>
<td class="selectable_day" date="8 Apr 2010">
8
</td>
<td class="selectable_day today" date="9 Apr 2010">
9
</td>
<td class="selectable_day" date="10 Apr 2010">
10
</td>
<td class="selectable_day" date="11 Apr 2010">
11
</td>
</tr>
<tr>
<td class="selectable_day" date="12 Apr 2010">
12
</td>
<td class="selectable_day" date="13 Apr 2010">
13
</td>
<td class="selectable_day" date="14 Apr 2010">
14
</td>
<td class="selectable_day" date="15 Apr 2010">
15
</td>
<td class="selectable_day" date="16 Apr 2010">
16
</td>
<td class="selectable_day" date="17 Apr 2010">
17
</td>
<td class="selectable_day" date="18 Apr 2010">
18
</td>
</tr>
<tr>
<td class="selectable_day" date="19 Apr 2010">
19
</td>
<td class="selectable_day" date="20 Apr 2010">
20
</td>
<td class="selectable_day" date="21 Apr 2010">
21
</td>
<td class="selectable_day" date="22 Apr 2010">
22
</td>
<td class="selectable_day selected" date="23 Apr 2010">
23
</td>
<td class="selectable_day" date="24 Apr 2010">
24
</td>
<td class="selectable_day" date="25 Apr 2010">
25
</td>
</tr>
<tr>
<td class="selectable_day" date="26 Apr 2010">
26
</td>
<td class="selectable_day" date="27 Apr 2010">
27
</td>
<td class="selectable_day" date="28 Apr 2010">
28
</td>
<td class="selectable_day" date="29 Apr 2010">
29
</td>
<td class="selectable_day" date="30 Apr 2010">
30
</td>
<td class="unselected_month" date="1 May 2010">
1
</td>
<td class="unselected_month" date="2 May 2010">
2
</td>
</tr>
</tbody>
</table>
</div>
Can anyone see where i might be going wrong here? Thanks in advance for any help!