Как использовать всплывающие окна Twitter Bootstrap для уведомлений о проверке jQuery?

Question

Я могу сделать так, чтобы всплывающие окна появлялись, используя bootstrap , и я также могу делать проверки, используя стандартный плагин проверки jQuery или механизм проверки jQuery ,Я не могу понять, как вставить одно в другое.

Я думаю, что мне нужен какой-то хук, который вызывается валидатором, когда он хочет отобразить уведомление, дать ему закрытие, которое передает сообщениеи целевой элемент для поповера.Это похоже на инъекцию зависимостей.

Все хорошо в теории, но я просто не могу понять, где находится этот хук, или даже если он существует в любом из механизмов валидации.Похоже, они оба намерены взять на себя ответственность за отображение уведомлений со всеми видами сложных вариантов размещения, оболочек, стилей, когда все, что мне нужно, это тип (ы) ошибки (мне даже не обязательно нужен текст сообщения) и элемент, к которому это относитсяк.Я нашел хуки для всей формы, а не для отдельных уведомлений.

Я очень предпочитаю системы проверки, использующие классы для определения правил, так как они прекрасно работают с динамически создаваемыми формами.

У всех естьрешение или лучшая идея?

Answer 1

Это то, что я вставил в свой валидатор, чтобы он соответствовал правилам Twitter Bootstrap.Сообщение о подтверждении ошибки помещается в <span class=help-inline>, и мы хотим выделить внешний контейнер как error или success:

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}

Answer 2

Вот как я это сделал.Но это включает в себя 2 изменения в скрипте проверки (здесь я получил код для начальной загрузки 1.4, а затем изменил его - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin-for-twitter-bootstrap/)

Мой вызов для проверки:

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

Тогда вам нужноизменить 2 вещи в jquery.validate.js1. применить это исправление - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. После строки 647 (в функции showLabel создайте часть метки) после строки .addClass(this.settings.errorClass) добавить строку: .addClass("help-inline")Кто-то может найти способ применить второе исправление в функции проверки, но я не нашел способа, так как showLabel вызывается после выделения.

Answer 3

Оформить заказ: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

Показывает, как использовать Bootstrap popover css вместо JS.Всплывающее окно метода JS вызовет проблему мигания.

Answer 4

tl; dr избегайте необходимости перечислять явные всплывающие окна, используя хэш-карту для хранения идентификаторов элементов и создавая всплывающие подсказки на лету (подходы Джеффри Гилберта и Кенни Мейера).1003 *

Вот мой дубль, который исправляет проблему мерцания, упомянутую другими, но в отличие от ответа @Джеффри Гилберта, не использует список (errorStates), а использует ошибку map .Хеш-карты FTW.Мне кажется, я помню, что читал где-то, что каждая проблема в CS может быть решена с помощью хэш-карты:)

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = 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("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

Спасибо всем, кто опубликовал свои идеи по этому вопросу.

Answer 5

Не уверен, относится ли это к обсуждению, потому что в оригинальном плакате запрашивались хуки для отображения / скрытия всплывающих окон начальной загрузки.

Я искал простую проверку, и всплывающие окна не имели значения. связанный пост и первый в результатах поиска google уже помечен как дубликат этого вопроса. Поэтому имело смысл упомянуть этот превосходный jqValidation JS @ ReactiveRaven, метко названный jqBootstrapValidation, который хорошо сочетается с Twitter Bootstrap. Установка занимает всего несколько минут. Скачать здесь .

Надеюсь, это добавляет ценность.

Answer 6

Если вы используете приведенный выше код Кенни Мейера для всплывающих окон, имейте в виду, что правила, проверяющие содержимое поля, но не обязательные, такие как действительный URL, приведут к тому, что всплывающее окно не исчезнет после очистки поля.Смотрите ниже onkeyup для решения.Если у кого-то есть лучшее решение, пожалуйста, напишите.

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }