0

我使用 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

4

1 回答 1

1

引用操作：

该字段报告必需的消息

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

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

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

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

引用操作：

下拉菜单自动打开和关闭

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

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

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/

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

请参阅： 如何在 Tooltipster 工具提示中显示来自 jQuery Validate 插件的消息？

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

于 2014-11-24T17:31:23.767 回答