views:

387

answers:

0

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"&gt;&lt;/script&gt; 
    <script type="text/javascript" src="http://localhost/httpdocs/media/js/jquery.date_input.js"&gt;&lt;/script&gt; 
    <script type="text/javascript" src="http://localhost/httpdocs/media/js/jquery.validationEngine-en.js"&gt;&lt;/script&gt; 
    <script type="text/javascript" src="http://localhost/httpdocs/media/js/jquery.validationEngine.js"&gt;&lt;/script&gt; 
    <script type="text/javascript" src="http://localhost/httpdocs/media/js/jtip.js"&gt;&lt;/script&gt; 

    <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!