0

現在、私は複数ステップのフォームを持つ Web アプリケーションに取り組んでいます。jquery validate plugin でフォームの各部分を検証しています。また、ポップオーバーとして検証メッセージが必要でした。このために、jquery validate ポップオーバー プラグインを使用しました。両方のライブラリが私の目的を果たしています。しかし、私は少し奇妙な問題に直面しています。

必須フィールドについては、ぼかしイベントの赤い枠の入力ボックスが必要でした。そして、入力が正しい場合、そのエラー クラスを div 要素のスタイルから削除したいと考えました。私はここで働いています：http://plnkr.co/edit/369WMY7uDdRLNfC8NZrp?p=preview

$(function() {
   $('#myform').validate({
            rules: {
                personalEmail: {
                    email: true
                }
            },
            messages: {
                personalEmail: {
                    email: "Custom Message - Please fill email id in proper format"
                }
            },
            highlight: function (element) {
                $(element).closest('div').addClass('has-error');
            },
            success: function (element) {
                $(element).closest('div').removeClass('has-error');
            },
            onsubmit: false,
            popoverPosition: 'top'
        });
})

検証ポップ オーバー プラグインを追加すると、入力ボックスのスタイルからのエラー クラスの削除を除いて、すべてがうまくいきます。jquery が div 要素のスタイルからエラー クラスを削除できない理由がわかりません。ここにこの奇妙な動作デモがあります: http://plnkr.co/edit/7iHoypnc1P0x7eiGLtLj?p=preview

$(function() {
   $('#myform').validate_popover({
            rules: {
                personalEmail: {
                    email: true
                }
            },
            messages: {
                personalEmail: {
                    email: "Custom Message - Please fill email id in proper format"
                }
            },
            highlight: function (element) {
                $(element).closest('div').addClass('has-error');
            },
            success: function (element) {
                $(element).closest('div').removeClass('has-error');
            },
            onsubmit: false,
            popoverPosition: 'top'
        });
})

なぜこれが起こっているのかわかりません。検証ポップオーバー プラグイン内で壊れるものはありますか?

4

1 に答える 1

1

ハイライト解除を実装する必要があります

// Code goes here
$(function () {
    $('#myform').validate_popover({
        rules: {
            personalEmail: {
                email: true
            }
        },
        messages: {
            personalEmail: {
                email: "Custom Message - Please fill email id in proper format"
            }
        },
        highlight: function (element) {
            $(element).closest('div').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('div').removeClass('has-error');
        },
        onsubmit: false,
        popoverPosition: 'top'
    });
})

デモ:プランカー

于 2014-09-29T07:10:58.690 に答える