Bootstrap4 输入验证将“无效反馈”添加到“表单组”答案

【问题标题】：Bootstrap4 input validation adding 'invalid-feedback' to 'form-group'Bootstrap4 输入验证将“无效反馈”添加到“表单组”
【发布时间】：2019-10-30 08:50:34
【问题描述】：

我在我的表单组上使用 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 类，表单看起来应该是正常的，但有了它，表单就具有属性 display: none。

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

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

JS 解决方案

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

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

这不是一个完美的答案，但我发现这是最好的解决方案。将其放在 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;
}

【讨论】：