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

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

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

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

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

У кого-нибудь есть решение или идея получше?

Взгляните на параметры highlightи showErrors jQuery Validator , они позволят вам подключать собственные пользовательские выделения ошибок, которые запускают всплывающие окна Bootstrap.

Это практический пример:

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

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

ОБНОВИТЬ

Итак, чтобы проверить всплывающее окно, вы можете использовать этот код:

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  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({
        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>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

Вы получите что-то вроде этого:

Проверьте jsFiddle .

Крис Фулстоу был прав, но мне потребовалось время, так что вот полный код:

Это показывает всплывающее окно при ошибке и скрывает метки ошибок по умолчанию:

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

Это устанавливает всплывающее окно. Единственное, что вам нужно от этого, это триггер: «вручную».

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

Атрибуты title и content, переданные в popover, не работали, поэтому я указал их встроенными в свой ввод #password с помощью data-content = 'Minimum 5 characters' и data-original-title = 'Invalid Password'. Вам также понадобится rel = 'popover' в вашей форме.

Это работает, но всплывающее окно мерцает после отмены выбора. Есть идеи, как это исправить?

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

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

Это расширение jQuery для подключаемого модуля проверки jQuery (проверено с версией 1.9.0) подойдет.

https://github.com/tonycoco/rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js

Это также добавляет некоторые сообщения об ошибках Rails-esk.

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

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

Вот как я это сделал с Bootstrap 2.x и jQuery Validate 1.9

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});

Обратите внимание на следующее:
- https://gist.github.com/3030983
Я думаю, что это самый простой способ.

РЕДАКТИРОВАТЬ

Код по ссылке:

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    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('popover').options.content = value.message;

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

        });

    }

});

Большое спасибо за внимание! Вот моя версия для Bootstrap, но с всплывающими подсказками. На мой взгляд, это более элегантно, чем поповеры. Я знаю, что вопрос был для всплывающих окон, поэтому, пожалуйста, не голосуйте против него по этой причине. Может, кому-то так понравится. Мне нравится, когда я что-то ищу, и я нашел новые идеи в Stackoverflow. Примечание: разметка формы не требуется.

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


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

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    }); 

Вот как я это сделал. Но это включает в себя внесение 2 изменений в сценарий проверки (здесь я получил код для начальной загрузки 1.4, а затем изменил его - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- для-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.js
1. примените это исправление - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. После строки 647 (в функции showLabel создайте часть метки ) после строки .addClass(this.settings.errorClass)добавить строку: .addClass("help-inline")
кто-то может найти способ применить второе исправление в функции проверки, но я не нашел способа, поскольку showLabel вызывается после выделения.

Это то, что я добавил в свой валидатор, чтобы соответствовать руководящим принципам Twitter Bootstrap. Сообщение о проверке ошибки помещается в a, <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');
}

Вот обновление отличного ответа Кенни Мейера выше . У меня была пара проблем, которые мешали ему работать, и я рассмотрел их в этом фрагменте:

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }

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

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

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

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

Вот мой вариант, который устраняет проблему мерцания, упомянутую другими, но, в отличие от ответа @Jeffrey Gilbert, не использует list ( errorStates), а скорее использует карту ошибок . Хеш-карты 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");
      }
    });
  }
});

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

Проверить это: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

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

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

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