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

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

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

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

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

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

Взгляните на 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); } }); 

введите описание изображения здесь

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

ОБНОВИТЬ

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

 $("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: "

" }); // 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 .

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

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

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

Это устанавливает popover. Единственное, что вам нужно от этого, это триггер: «manual»

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

Атрибуты заголовка и содержимого, переданные в popover, не работали, поэтому я указал их inline в моем входе #password с данными-содержимым = ‘Минимальные 5 символов’ и data-original-title = ‘Invalid Password’. Вам также нужно rel = ‘popover’ в вашей форме.

Это работает, но popover мерцает от отмены выбора. Любая идея, как это исправить?

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

 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 bootstrap. Просто добавил classы проверки 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'); }}); . $('#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: '

' }); _popover.data('popover').options.content = value.message; $(value.element).popover('show'); }); } });

Большое спасибо за головы! Вот моя версия для Bootstrap, но с подсказками. По-моему, это более элегантно, чем popovers. Я знаю, что вопрос был для popovers, поэтому, пожалуйста, не голосуйте по этой причине. Может, кому-то это понравится. Мне нравится, когда я что-то ищу, и я нашел новые идеи в 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 изменений в скрипт проверки (я получил код для bootstrap 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. Сообщение о проверке ошибок помещается в и мы хотим выделить внешний контейнер как 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'); } . 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'); } 

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

 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: '

' }); //bs.popover must be used, not just popover ele.data("bs.popover").options.content = error.message; return $(error.element).popover("show"); }); }

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

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

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

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

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

 var err_map = new Object(); // <--- nb $("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: "

" }); _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 вызовет мигающую проблему.

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

 onkeyup: function(element, event) { if($(element).valid()) { return $(element).popover("hide"); } } 
  • Как пропустить проверку при нажатии на определенную кнопку?
  • MVC Возвращает частичный вид как JSON
  • Проверка нокаута
  • HTML5: тип ввода номера, который принимает только целые числа?
  • Простой скрипт проверки формы jQuery
  • Проверьте, нет ли входов пустых с помощью jQuery
  • Подтвердите количество элементов has_many в Ruby on Rails
  • Выполнение проверки на стороне клиента для пользовательского атрибута
  • Angularjs препятствуют отправке формы при неудачной проверке ввода
  • Как заставить проверку формы html5 без отправки ее через jQuery
  • Использование правил проверки WPF и отключение кнопки «Сохранить»
  • Interesting Posts

    Есть ли способ отключить Windows, автоматически выбирая шаблоны папок?

    Java: Как я могу скомпилировать всю структуру каталогов кода?

    Confused об Angularjs, заключаемых и изолирующих областях и привязках

    Отображать номера от 1 до 100 без петель или условий

    Максимальное использование памяти MySQL

    Отображение типа CLR типа EDM неоднозначно с EF 6 и 5?

    «Или» эквивалент выражения Linq Where () lambda

    Сенсор Android TYPE_LINEAR_ACCELERATION – что он показывает?

    Передача изображения из одной активности другого действия

    java.security.cert.CertificateException: сертификаты не соответствуют ограничениям алгоритма

    Как добавить текстуру для заполнения цветов в ggplot2?

    Код VBscript для захвата stdout, без отображения windows консоли

    Как обрабатывать HTTP OPTIONS с помощью Spring MVC?

    Центральное сообщение в диалоговом окне андроида

    Могу ли я объединить две локальные сети в одну, чтобы получить двойную скорость?

    Давайте будем гением компьютера.