javascript - 什么库 stackoverflow 表单用于显示错误(用于错误帮助 block 的 Bootstrap 弹出窗口)

Question

我有一个表单，我想显示验证错误消息。现在我使用 bootstrap has-error 和 help-block 来显示验证。但我真的很喜欢 Stackoverflow 的提问表单中错误消息的显示方式。是否有用于显示这些消息的 js/css 库，或者这是由 stackoverflow 构建的东西，无论哪种情况，我如何在我的表单中创建这样的东西(最好是 bootstrap 的扩展)。

Answer 1

我非常接近使用 Bootstrap poppver。 (请注意，我将 laravel 与 bootstrap 和 jquery 一起使用)。我从 php 变量 $errors 中识别有错误的字段，该变量提供输入或文本区域字段名称。

jquery 给有错误的字段添加数据属性

{{-- CUSTOM POPOVERS --}}
<script>
jQuery(function(){
    /**
     * Script to highlight erred fields and show popover error messages in form fields
     * This script needs to be in this page, not some js file, as it uses $error php variable
     */
    errors_json = '<?php if (isset($errors)) echo json_encode($errors->toArray()); else echo []; ?>';
    errors = $.parseJSON(errors_json);
    $.each(errors, function (i, val) {
        var input = $('input[name=' + i + ']'+','+'textarea[name=' + i + ']');
        input.attr('title', 'Errors').attr('data-toggle', 'popover').attr('data-trigger', 'focus').attr('data-placement', 'top').attr('data-content', val);
        input.addClass('highlight-error').popover();
    });
});
</script>

和 css 在 bootstrap popovers 中获得红色以指示错误

 .popover {
     background-color: #dd4b39;
     border: 1px solid #b33f2d;
     border: 1px solid rgba(221, 75, 57, 0.25);
     border-radius: 0;
     color: white;
 }
.popover-title {
    background-color: #b33f2d;
    border-bottom: 1px solid #ebebeb;
    border-radius: 0;
}
.popover-content{

}
.popover.top > .arrow {
    border-top-color: #dd4b39;
    border-top-color: rgba(221, 75, 57, 0.25);
}
.popover.top > .arrow:after {
    border-top-color: #dd4b39;
}
.popover.right > .arrow {
    border-right-color: #dd4b39;
    border-right-color: rgba(221, 75, 57, 0.25);
}
.popover.right > .arrow:after {
    border-right-color: #dd4b39;
}
.popover.bottom > .arrow {
    border-bottom-color: #dd4b39;
    border-bottom-color: rgba(221, 75, 57, 0.25);
}
.popover.bottom > .arrow:after {
    border-bottom-color: #dd4b39;
}
.popover.left > .arrow {
    border-left-color: #dd4b39;
    border-left-color: rgba(221, 75, 57, 0.25);
}
.popover.left > .arrow:after {
    border-left-color: #dd4b39;
}