jQuery Validation and Tipsy не работает с select в IE

Question

Я использую плагин проверки jQuery для проверки моей формы и использования подсказки подсказок для сообщений об ошибках. У меня есть проблема с работой в раскрывающемся меню в IE 10/11.

После проверки, если поле сообщает требуемое сообщение, раскрывающийся список открывается и закрывается автоматически, не предоставляя вам возможность выбора поля.

$('[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'); 
    }, 

Как это исправить?

JSFIDDLE

Answer 1

Цитата OP:

поле сообщает нужное сообщение

Вся эта проблема связана с тем, как IE является запуск события, когда вы делаете выбор. В других браузерах просто выбор новой опции сразу вызывает повторную проверку. Однако в проводнике повторная проверка не запускается до тех пор, пока вы не полностью сосредоточитесь на поле select.

Обходным путем является ручной захват события change и повторная валидация силы с использованием метода плагина .valid().

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

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

---

Цитата OP:

выпадающий открывается и закрывается автоматически

Это потому, что IE перерисовывает активированный элемент select каждый раз, когда вы меняете его атрибут title; и ваша функция errorPlacement меняет title всякий раз, когда вы пытаетесь сделать выбор.

Это не идеальный вариант, но единственное обходное решение, похоже, перемещает собственное сообщение об ошибке в атрибут titleselect.

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/

---

Пока ваше решение зависит от динамического изменения атрибута title в то время как select активирован, у вас всегда будет какая-то форма этой проблемы.Это именно то, как работает IE, поэтому лучше всего полностью нарушить зависимость от атрибута title или полностью использовать другой всплывающий плагин.

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

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