Question

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

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。

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

HTML：

select

jQuery的：

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

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

只要您的解决方案依赖于在激活errorPlacement: function (error, element) { // element.attr('title', error.text()); // remove this element.tipsy('show'); },时动态更改title属性，您就会遇到某种形式的问题。这就是IE的工作原理，所以最好完全打破对select属性的依赖，或者完全使用不同的工具提示插件。

请参阅：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

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

jQuery验证和Tipsy不能在IE中使用select

1 个答案: