Bootstrap Popovers не будет отображаться должным образом, если он выключен на мобильном устройстве

Question

Как гласит название, popovers не будет отображаться должным образом, если выключено. Кажется, что это имеет смысл, но стрелка для popover все еще появляется. Мне нужно, чтобы popover отображался на странице, даже если он выключен.

Я использую popovers для уведомления о моей форме. Я использую jquery validate, плагин.

Это изображение того, что происходит.

Вот код для проверки:

$(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 используется для составления списка сообщений об ошибках для всей формы; он обычно не используется для обработки каждого сообщения, как это происходит. Для всплывающих подсказок вам нужно будет обрабатывать каждое сообщение, как оно есть, а не все сразу.

Для отображения/скрытия всплывающих подсказок для ваших ошибок, вам необходимо использовать функции обратного вызоваи success.

Регулировка по мере необходимости для Bootstrap 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 Однако проверять с помощью Bootstrap Popovers, однако, я никогда не использовал его сам.

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