Using Bootstrap popover to show the MVC unobtrusive error

置顶 foalbang

于 2014-03-05 15:04:01 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap mvc

本文链接：https://blog.youkuaiyun.com/foalbang/article/details/20547223

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用jQuery validator插件自定义错误显示方式，并通过Popover实现错误提示的展示效果。文章提供了具体的代码示例，包括如何覆盖默认的错误显示行为及调整样式以适应不同的前端框架。

1.using below code segment to overwrite the default show errors.

 jQuery.validator.setDefaults({
            onkeyup: false,
            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: "right",
                        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:
                    _popover.data("bs.popover").options.content = value.message;
                    // Bootstrap 2.x:
                    // _popover.data("popover").options.content = value.message;
                    return $(value.element).popover("show");
                });
            }
});

2.you'd better to modify the popover style to make the white-space nowrap;