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

7
  • 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 to see what I'm talking about.
    – Sparky
    Nov 24, 2014 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, 2014 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". Nov 24, 2014 at 16:41
  • @Sparky - I add a jsfiddle demo. Nov 24, 2014 at 17:09
  • You need to use the W3 HTML validator, not the console for that.
    – Sparky
    Nov 24, 2014 at 17:12

1 Answer 1

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/

4
  • 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! Nov 24, 2014 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, 2014 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 Nov 24, 2014 at 18:42
  • @PaoloRossi, I'd edited my question to refer to a solution you can use immediately.
    – Sparky
    Nov 24, 2014 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.