bootstrap-4 - Bootstrap4 输入验证将“无效反馈”添加到“表单组”

问题描述

我在我的表单组上使用 Bootstrap v4.0.0 验证。例如，在更改密码表单上，用户输入

旧密码
新密码
新密码（确认）

如果新密码不匹配，则验证会将框变为红色并显示错误消息。

我的代码在本地显示验证消息，但在生产中，无效字段正在消失。这是正在发生的事情：

在本地提交时，如果旧密码无效，则 div 如下所示：

<div id="div_id_oldpassword" class="form-group">

在提交时的生产中，如果旧密码无效，则 div 如下所示：

<div id="div_id_oldpassword" class="form-group invalid-feedback">

如果我invalid-feedback从表单组中删除该类，则表单看起来应该如此，但在那里，表单具有 property display: none。

我不确定为什么要在此处添加此类，特别是因为我没有从本地-> 生产中对我的代码（或引导 css 文件）进行任何更改。

什么可能导致这些差异？如何阻止引导程序在此处添加此类？我可以通过使用 JS 来修复它，但是我还缺少另一个解决方案吗？

JS解决方案

window.onload = function() {
    $('.form-group').removeClass('invalid-feedback');
}

标签： bootstrap-4

这不是一个完美的答案，但我发现这是最好的解决方案。将其放在 bootstrap.css 链接之后以覆盖一些更改。

/* Invalid feedback fix */
.invalid-feedback {
   display: inherit !important;
   width: 100% !important;
   margin-top: inherit !important;
   font-size: 13px !important;
   color: #e74a3b !important;
}
.invalid-feedback label:first-child {
   font-size: 16px !important;
}

bootstrap-4 - Bootstrap4 输入验证将“无效反馈”添加到“表单组”

问题描述

解决方案

推荐阅读