Question

我在表单组上使用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');
}

Answer 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;
}

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

1 个答案: