Using Bootstrap popover to show the MVC unobtrusive error

原创于 2014-03-05 15:04:01 发布 · 置顶 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #mvc

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;