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

引用OP：

フィールドは必要なメッセージを報告します

この全体の問題は、選択を行うたびに IE がイベントをトリガーする方法に関係しています。他のブラウザーでは、新しいオプションを選択するだけですぐに再検証がトリガーされます。selectただし、Explorer では、フィールドから完全に離れるまで再検証はトリガーされません。

回避策は、イベントを手動でキャプチャし、プラグインのメソッドchangeを使用して再検証を強制することです。.valid()

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

デモ: http://jsfiddle.net/d7apuegL/

引用OP：

ドロップダウンは自動的に開閉します

これは、属性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 に答える