0

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?

Community
  • 1
  • 1
PhoenixzeroX
  • 61
  • 1
  • 9
  • Have you searched this site? http://stackoverflow.com/q/18228446/594235 – Sparky Jun 18 '15 at 17:12
  • @Sparky: Didn't saw that question. Let me try that and I'll give you more details – PhoenixzeroX Jun 18 '15 at 17:14
  • Integrating jQuery Validate with a Tooltip plugin is not a trivial task. This question/answer is relevant because it shows you how it's done using another kind of tooltip plugin. http://stackoverflow.com/q/14741688/594235 – Sparky Jun 18 '15 at 17:17
  • @Sparky: Already made the suggested changes. But the issue still remains. Here's the [JSFiddle code](https://jsfiddle.net/rabzy3rj/). Am I doing something wrong?. Thanks in advance. P.S. Yeah I discovered that integrating tooltips with the validations seems to be anything else than easy :S – PhoenixzeroX Jun 18 '15 at 17:37
  • Pretty basic mistakes here. Every element **MUST** contain a `name` attribute in order for jQuery Validate to work properly. You also erroneously put the `errorPlacement` option within the `.tooltip()` method. `errorPlacement` is an option of the `.validate()` method. See: https://jsfiddle.net/rabzy3rj/1/ – Sparky Jun 18 '15 at 19:05
  • Thanks @Sparky for your comments. I'm going to try to use tooltipster as described in your second comment and i'll give you my comments once I make the changes. Thanks again for your help – PhoenixzeroX Jun 18 '15 at 19:14
  • Hi everyone: I agree that this is a duplicate question and at this moment I found the answer. But I don't agree to point the question to the link http://stackoverflow.com/questions/18228446/jquery-ui-tooltip-with-jquery-validate-plugin because that question does not answer completely my issue. My issue es more like [this question](http://stackoverflow.com/questions/19503864/prevent-jquery-validate-from-using-the-title-attribute-as-an-error-message). If someone can change the "This question has an answer here" to point this answer will be appreciated. Thanks in advance – PhoenixzeroX Jun 19 '15 at 16:00

0 Answers0