0

I use jQuery Validation plugin for validate my form and use Tipsy tooltip for error messages. I have a problem to work for drop-down in IE 10/11.

After validation, if the field reports a required message the drop-down opens and closes automatically without giving you the opportunity to select the field.

    $('[id^="form-"] :input').tipsy({
       trigger: 'manual',
       fade: true,
       gravity: 'e',
       className: 'tip-blue'
    });


    $("#form-account").validate({ 
    ...
    errorPlacement: function (error, element)
    {
        element.attr('title', error.text());
        element.tipsy('show');
    },

How can I fix it?

JSFIDDLE

Sparky
  • 98,165
  • 25
  • 199
  • 285
Paolo Rossi
  • 2,490
  • 9
  • 43
  • 70
  • Integrating a jQuery tooltip plugin with the jQuery Validate plugin can be a very complex task that depends on the methods made available by both plugins. So you're going to have to put a lot more effort into writing your question... like including a more complete demo along with the relevant HTML and the rest of what's inside your `.validate()` method. Meanwhile, [take a look at this question](http://stackoverflow.com/a/14741689/594235) to see what I'm talking about. – Sparky Nov 24 '14 at 16:25
  • Since jQuery is designed to normalize these behaviors to work in all browsers including IE 10/11, you're really going to have to examine your HTML structure. I suspect that you have invalid HTML that Explorer cannot handle. – Sparky Nov 24 '14 at 16:31
  • @Sparky - The html code not report errors (with firebug and IE console). I read a post where someone said that "It looks like IE does not like the title attribute on selects". – Paolo Rossi Nov 24 '14 at 16:41
  • @Sparky - I add a jsfiddle demo. – Paolo Rossi Nov 24 '14 at 17:09
  • You need to use [the W3 HTML validator](http://validator.w3.org), not the console for that. – Sparky Nov 24 '14 at 17:12
  • There is nothing in the spec that says you cannot have a `title` on `select` elements. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select – Sparky Nov 24 '14 at 17:14
  • @Sparky _ If you try my demo with IE11 can see the problem. It unfortunately does not depend html code wrong :( . Thanks – Paolo Rossi Nov 24 '14 at 17:21

1 Answers1

1

Quote OP:

the field reports a required message

This whole problem has to do with how IE is triggering the events whenever you make a selection. In other browsers, simply selecting a new option immediately triggers re-validation. However, in Explorer, the re-validation is not triggered until you focus completely out of the select field.

The workaround is to manually capture the change event and force re-validation by using the plugin's .valid() method.

$('[name="user"]').on('change', function() {
    $(this).valid();
});

DEMO: http://jsfiddle.net/d7apuegL/

Quote OP:

the drop-down opens and closes automatically

This is because IE is re-rendering the activated select element every-time you change its title attribute; and your errorPlacement function is changing the title whenever you try to make a selection.

It's not perfect, but the only workaround seems to be moving the custom error message into the title attribute of the select.

HTML:

<select name="user" id="test" title="error">

jQuery:

errorPlacement: function (error, element) {
    // element.attr('title', error.text()); // remove this
    element.tipsy('show');
},

DEMO: http://jsfiddle.net/d7apuegL/1/

As long as your solution depends upon dynamically changing the title attribute while the select is activated, you're always going to have some form of this issue. It's just how IE works, so it might be best to totally break your dependency upon the title attribute or use a different tooltip plugin entirely.

See: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

DEMO: http://jsfiddle.net/2012j6dv/

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • The second option seemed to solve my problem, but I realized that after I selected the field and try to select it again the problem (close automatically) still occurs .. thanks for your help! – Paolo Rossi Nov 24 '14 at 18:19
  • @PaoloRossi, I said it wasn't perfect and as long as you're dependent upon changing the `title` attribute while the select is activated, you're always going to have some form of this issue. If it were mine, I'd totally break the dependency upon the `title` attribute and use a different tooltip plugin if necessary. – Sparky Nov 24 '14 at 18:37
  • thank you very much for your help and the time you have dedicated to my problem. I would like to ask you if you know a tooltip plugin that allows me to solve this problem. Thanks again – Paolo Rossi Nov 24 '14 at 18:42
  • @PaoloRossi, I'd edited my question to refer to a solution you can use immediately. – Sparky Nov 24 '14 at 18:44