如何使用Twitter Bootstrap popovers进行jQuery验证通知？

Question

我可以很容易地使用bootstrap使弹出窗口出现,我也可以使用标准的jQuery验证插件或jQuery验证引擎进行验证,但我无法弄清楚如何将其中一个提供给另一个.

我认为我需要的是一些钩子,当它想要显示通知时由验证器调用,给它一个将消息和目标元素传递给弹出窗口的闭包.这似乎是一种依赖注入.

理论上一切都很好,但我无法弄清楚钩子的位置,或者即使在任一验证引擎中都存在.他们似乎都有责任负责显示通知,包括各种精心设置的放置,包装器,样式选项,当我所有人都是错误类型(我不一定需要消息文本)和它相关的元素至.我找到了整个表单的钩子,而不是单独的通知.

我更喜欢使用类来定义规则的验证系统,因为它们与动态创建的表单很好地配合.

任何人都有解决方案或更好的主意？

Answer 1

这是一个动手的例子:

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

它并没有真正使用bootstrap popovers,但它看起来非常好并且很容易实现.

UPDATE

因此,要进行弹出窗口验证,您可以使用以下代码:

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

Answer 2

看看highlight和showErrors jQuery Validator选项,这些将让你挂钩自己的自定义错误亮点,触发Bootstrap弹出窗口.

Answer 3

Chris Fulstow做对了,但它还花了我一段时间,所以继承完整的代码:

这会显示错误的弹出框,并隐藏默认的错误标签:

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

这设置了popover.你唯一需要的是触发器:'手动'

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

传递给popover的标题和内容属性不起作用,因此我在#password输入中将其内联指定为data-content ='Minimum 5 characters'和data-original-title ='Invalid Password'.您还需要在表单中使用rel ='popover'.

这样可行,但是弹出窗口在未经选择时闪烁.知道怎么解决这个问题吗？

Answer 4

这是对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'
});

Answer 5

这个用于jQuery Validation Plugin的jQuery扩展(使用1.9.0版测试)可以解决问题.

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

这也增加了一些Rails-esk错误消息.