使用引導3個Popovers隨着CKEditor的4和jQuery驗證

Question

這是一個問題，我以前問的延續：jQuery Validate, Select2, and Bootstrap 3 Popovers - How to Bind Popover To Select2's Parent Elements Instead of Hidden Select Element

雖然與選擇二的問題得到解決，與CKEditor的問題從來沒有，雖然當時我採取了替代解決方案，我寧願使用popovers，因爲它們在觸發時不會改變文檔佈局。

這是我目前問題的小提琴：http://jsfiddle.net/jemxtthb/13/

我知道它有選擇的if語句的鏈接做的事情 - 我把一些控制檯輸出，以確保其觸發對的酥料餅CKEditor的元素：

if (element.is(':hidden')) { 
       $(element).siblings().next().popover('show').parents('.form-group').addClass('has-error').removeClass('has-success'); 
        console.log('hidden element'); 
      } else { 
      $(element).popover("show").parents(".form-group").addClass('has-error').removeClass('has-success'); 
       console.log('normal element'); 
      } 

您可以在該酥料餅被觸發Chrome的開發者工具的元素標籤看，但它結束了在視口左上角之中。我怎樣才能將它附加到CKEditor DIV上，或者至少圍繞它，像圍繞它的form-group DIV？

奇怪的是，Select2替換元素的位置沒有問題;我懷疑這與他們使用aria-hidden的事實有關，而不是CKEditor的display: none visibility: hidden方法。

任何幫助/建議表示讚賞，並希望將有利於其他人可能會遇到類似的問題掙扎。

Answer 1

首先，只使用errorPlacement和success函數來顯示/隱藏，而不是錯誤/有效的類別分配。

errorPlacement: function(error, element) { // <- SHOW the tooltip 

    var lastError = $(element).data('lastError'), 
     newError = $(error).text(); 

    $(element).data('lastError', newError); 

    if (newError !== '' && newError !== lastError) { 
     $(element).popover({ 
      trigger: "manual", 
      placement: "auto top", 
      content: newError, 
      container: "body", 
      template: "<div class=\"popover\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"popover-content\"><p></p></div></div>" 
     }); 
     $(element).popover('show'); 
    } 
}, 
success: function(label, element) { // <- HIDE the tooltip 
    $(element).popover("hide"); 
} 

其次，把具有與CSS類爲highlight和unhighlight功能做的一切。

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

第三，通過註釋上面的各行，可以看到CSS類與彈出窗口的位置無關。您的彈出窗口出現在窗口的左上角，因爲它總是附加到正在驗證的元素上，表示爲element;而在CKEditor的情況下，根元素是隱藏的。

由於您初始化.popover()在$(element)，那麼這就是它所做的一切。 您必須初始化並在可見元素上顯示它。在下面的示例中，我選擇隱藏的textarea的直接父級，即$(element).parent()。然後我鏈接.popover('show')到初始化...

$(element).parent().popover({ 
    trigger: "manual", 
    placement: "auto bottom", 
    content: newError, 
    container: "body", 
    template: "<div class=\"popover\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"popover-content\"><p></p></div></div>" 
}).popover('show'); 

然後我把這個裏面你的條件...

if ($(element).is(':hidden')) { 
    $(element).parent().popover({....}).popover('show'); 
} else { 
    $(element).popover({....}).popover('show'); 
} 

把所有的上述在一起，那麼，你想調整選擇器和DOM遍歷。 ..

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