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