jquery - jquery のハイライトをフォーム検証で動作させることができません

Question

私はここにいるのは初めてで、可能であれば少し助けてください。検証中のフォームがありますが、ポップオーバーを保持するだけでなく、エラーフィールドも強調表示したいと考えています。何が悪いのか理解できませんか？

ここのjsfiddleにあります- http://jsfiddle.net/mKF5L/75/

$('form').validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        subject: {
            required: true,
            minlength: 10

        },
        comment: {
            required: true,
            minlength: 10,
            maxlength: 200
        }

    },

    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('bs.popover').options.content = value.message;

            $(value.element).popover('show');

        });
    }
});

誰が私が間違っているのか教えてもらえますか?

前もって感謝します

ゲイリー。

score 0 · Accepted Answer

コールバックは個々のエラーを配置するためのshowErrorsものではなく、エラーの概要を作成するためのものです。

errorPlacementしたがって、ツールチップを制御するには、およびsuccessコールバック関数を使用する必要があります。

これは、Tooltipster プラグインを使用した同様のセットアップです。必要に応じて調整...

$(document).ready(function () {

    $('#myform').validate({
            // rules and options here,
            errorPlacement: function (error, element) {
                $(element).tooltipster('update', $(error).text());
                $(element).tooltipster('show');
            },
            success: function (label, element) {
                $(element).tooltipster('hide');
            }
    });

});

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

参考： https ://stackoverflow.com/a/14741689/594235

ドキュメント: http://jqueryvalidation.org/validate