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

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

84 голосов
/ 09 декабря 2011

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

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

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

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

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

Ответы [ 16 ]

80 голосов
/ 30 декабря 2011

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

$('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); 
    }
});

enter image description here

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

ОБНОВЛЕНИЕ

Итак, для проверки поповера вы можете использовать этот код: 

$("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");
    });
  }
});

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

enter image description here

Проверьте jsFiddle .

21 голосов
/ 09 декабря 2011

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

9 голосов
/ 05 января 2012

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

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

$('#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 символов' и data-original-title = 'Invalid Password'. Вам также необходимо указать rel = 'popover' в вашей форме.

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

6 голосов
/ 23 декабря 2012

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

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'
});
5 голосов
/ 26 апреля 2012

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

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

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

3 голосов
/ 27 февраля 2013

Большое спасибо за головы! Вот моя версия для 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');

            });

        }

    });
3 голосов
/ 23 сентября 2012

Пожалуйста, взгляните на следующее:
- 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');

        });

    }

});
3 голосов
/ 04 апреля 2012

Вот как я это сделал с 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');
    }});
3 голосов
/ 04 января 2012

Я предпочитаю менять 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;
}
2 голосов
/ 01 августа 2016

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

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");
        });
    }
Страница:
...