jQuery Validation 和 Tipsy 不能在 IE 中使用 select答案

【问题标题】：jQuery Validation and Tipsy not working with select in IEjQuery Validation 和 Tipsy 不能在 IE 中使用 select
【发布时间】：2014-11-25 02:51:56
【问题描述】：

我使用 jQuery Validation 插件来验证我的表单并使用 Tipsy 工具提示来获取错误消息。我在 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

【问题讨论】：

将 jQuery 工具提示插件与 jQuery Validate 插件集成可能是一项非常复杂的任务，这取决于两个插件提供的方法。所以你将不得不付出更多的努力来写你的问题......比如包括一个更完整的演示以及相关的 HTML 以及你的 .validate() 方法中的其余内容。同时，take a look at this question 看看我在说什么。
由于 jQuery 旨在规范这些行为以在包括 IE 10/11 在内的所有浏览器中工作，因此您真的必须检查您的 HTML 结构。我怀疑您的 HTML 无效，Explorer 无法处理。
@Sparky - html 代码不报告错误（使用 firebug 和 IE 控制台）。我读过一篇帖子，有人说“看起来 IE 不喜欢 select 上的 title 属性”。
@Sparky - 我添加了一个 jsfiddle 演示。
你需要使用the W3 HTML validator，而不是控制台。

标签： jquery jquery-validate internet-explorer-10 internet-explorer-11 tipsy

【解决方案1】：

引用OP：

该字段报告必填消息

这整个问题与 IE 如何在您进行选择时触发事件有关。在其他浏览器中，只需选择一个新选项即可立即触发重新验证。但是，在 Explorer 中，直到您完全离开 select 字段后才会触发重新验证。

解决方法是手动捕获change 事件并使用插件的.valid() 方法强制重新验证。

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

演示：http://jsfiddle.net/d7apuegL/

引用OP：

下拉菜单会自动打开和关闭

这是因为每次您更改其title 属性时，IE 都会重新渲染激活的select 元素；并且您的 errorPlacement 函数会在您尝试进行选择时更改 title。

这并不完美，但唯一的解决方法似乎是将自定义错误消息移动到 select 的 title 属性中。

HTML：

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

jQuery:

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

演示：http://jsfiddle.net/d7apuegL/1/

只要您的解决方案依赖于在激活select 时动态更改title 属性，您总会遇到这种问题的某种形式。这就是 IE 的工作方式，因此最好完全打破对 title 属性的依赖或完全使用不同的工具提示插件。

见：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

演示：http://jsfiddle.net/2012j6dv/

【讨论】：

第二个选项似乎解决了我的问题，但我意识到在我选择了该字段并尝试再次选择它之后，问题（自动关闭）仍然出现..感谢您的帮助！
@PaoloRossi，我说它并不完美，只要你依赖于在激活选择时更改 title 属性，你总是会有这种形式问题。如果是我的，我会完全打破对title 属性的依赖，并在必要时使用不同的工具提示插件。
非常感谢您的帮助以及您为解决我的问题所付出的时间。我想问你是否知道一个工具提示插件可以让我解决这个问题。再次感谢
@PaoloRossi，我已经编辑了我的问题以参考您可以立即使用的解决方案。