Как использовать всплывающие окна Twitter Bootstrap для уведомлений о проверке 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-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.js
1. примените это исправление - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. После строки 647 (в функции showLabel создать часть метки) после строки .addClass(this.settings.errorClass) добавить строку: .addClass("help-inline") < br /> Кто-то может найти способ применить второе исправление в функции проверки, но я не нашел способа, так как showLabel вызывается после выделения.

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

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

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, не использует список (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");
      }
    });
  }
});

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

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

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

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