如果在移動設備上屏幕外顯示，Bootstrap Popovers將無法正常顯示

Question

正如標題所示，如果屏幕不亮，彈出窗口將無法正常顯示。這似乎是有道理的，但彈出窗口的箭頭仍然顯示出來。我需要彈出窗口在頁面上可見，即使它在屏幕外。

我使用彈出來作爲我的表單上的驗證通知。我正在使用jquery驗證，插件。

這是發生的事情的圖像。

下面是驗證碼：

$(document).ready(function() { 
     $("#form1").validate({ 
      onsubmit: false, 
      rules: { 
       ctl00$MainContent$txtEventName: { required: true }, 
       ctl00$MainContent$txtEventDate: { required: true, date: true }, 
       ctl00$MainContent$txtEventGuests: { required: true, number: true }, 
       ctl00$MainContent$txtZip: { required: true, number: true, minlength: 5 }, 
       ctl00$MainContent$txtEmail: { required: true, email: true }, 
       ctl00$MainContent$txtPwd: { required: true }, 
       ctl00$MainContent$txtConfirmPwd: { equalTo: "#MainContent_txtPwd" } 
      }, 
      messages: { 
       ctl00$MainContent$txtEventName: "Please enter the event name", 
       ctl00$MainContent$txtEventDate: "Please enter a date that is not before today", 
       ctl00$MainContent$txtEventGuests: "Please enter the amount of guests attending the event", 
       ctl00$MainContent$txtZip: "Please enter a valid zipcode", 
       ctl00$MainContent$txtEmail: "Please enter a valid email address", 
       ctl00$MainContent$txtConfirmPwd: "Your passwords must match" 
      }, 
      showErrors: function (errorMap, errorList) { 
       //$.each(this.successList, function(index, value) { 
       // return $(value).popover("hide"); 
       //}); 
       return $.each(errorList, function(index, value) { 
        var _popover; 
        _popover = $(value.element).popover({ 
         placement: "right", 
         content: value.message, 
         template: "<div class=\"popover\" style='width: 195px;'><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"></div></div></div>" 
        }); 
        return $(value.element).popover("show"); 
       }); 
      }, 
      submitHandler: function (form) { // for demo 
       return false; // for debug 
      } 
     }); 
    }); 

有沒有人有什麼我可以做些什麼來解決這個問題的任何想法？

Answer 1

你的方法有點瑕疵。 showErrors用於編寫整個表單的錯誤消息列表;它通常不用於處理每封郵件。對於工具提示，您需要處理每條消息，而不是一次處理所有消息。

爲了顯示/隱藏錯誤的工具提示，您需要改用errorPlacement和success回調函數。

根據需要引導popovers調整...

$(document).ready(function() { 

    $('#myform').validate({ 
      // rules and options here, 
      errorPlacement: function (error, element) { 
       // construct tooltip with message as per plugin method 
       // show tooltip 
      }, 
      success: function (label, element) { 
       // hide tooltip as per plugin method 
      } 
    }); 

}); 

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

文檔：http://jqueryvalidation.org/validate

---

另外，這裏是應該插件自動整合jQue ry使用Bootstrap Popovers進行驗證，但是，我從來沒有使用過它。

https://github.com/mingliangfeng/jquery.validate.bootstrap.popover