Conflict between jQuery Validate and jQuery-UI Tooltip

96 views Asked by At

I request for you help because I found a kind-of issue when using the jQuery-UI Tooltips and the jQuery Validation. The jsFiddle can be found here. Basically is issue is that if I set static comments for a specific field. When I try to validate the contents of the field, if there's an error, instead of appearing the error message, appears the static message set by the tooltip.

HTML code:

<form method="post">
<table>
    <tr>
        <td>
            <label for="name">Name</label>
        </td>
        <td>
            <input type="text" title="Complete name" required="required" id="name"/>
        </td>
    </tr>
    <tr>
        <td>
            <label for="address">Address</label>
        </td>
        <td>
            <input type="text" title="Complete address" required="required" id="address"/>
        </td>
    </tr>
    <tr>
        <td>
            <label for="comments">Comments</label>
        </td>
        <td>
            <input class="alphanumeric" type="text" title="additional comments" id="comments" required="required"/>
        </td>
    </tr>
</table>
<input type="submit" value="submit"/>

JS code:

$(document).ready(function(){
    $('input').tooltip();
    $('form').validate();
});

In an act of desperation I followed these instructions, but unfortunately doesn't work.

Does anyone has a work-around or best practices to follow in this kind of scenario?

0

There are 0 answers