Bootstrap 4 无效反馈，输入组不显示

Question

我一直在研究 Bootstrap 4 - beta，但是当使用 .is-invalid 和 .input-group 时，它似乎没有出现。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="label">Label</label>
  <div class="input-group">

    <div class="input-group-addon">
      label
    </div>
    <input type="text" value="" name="label" class="form-control is-invalid">
  </div>

  <div class="invalid-feedback is-invalid">
    <strong>Invalid Label</strong>
  </div>
</div>

您在使用.input-group 时如何显示无效消息？

添加以下 CSS 可以作为一种解决方法，但看起来很奇怪。

.form-group.is-invalid {
    .invalid-feedback {
        display: block;
    }
}

Answer 1

Boostrap 4 有很多问题。我的建议是替换：

 <div class="invalid-feedback">
 Text here
 </div>

与：

<div class="text-danger">
Text here
</div>

第二个看起来几乎一样，不会失败。

为了更好看，请尝试：

<div class="text-danger">
<small>Text here</small>
</div>

Answer 2

他们没有考虑他们自己使用输入组插件和按钮的示例，即使使用列模型也是如此。标记只促进“相邻”元素，而不是父 > 相邻元素（没有 CSS 规则）。

目前看来，您应该回退到 Alpha 6 或相应地编写自己的 CSS 类。不幸的是，我也做过同样的事情。

请注意，在阅读我的回答时，这是在测试版发布时发布的。 :)

Answer 3

例如，Bootstrap 将 display 从 none 覆盖到 block 的方式是首先检查之前的 is-invalid 类！看看这个 CSS：

这意味着，如果发生错误，必须首先将is-invalid 应用于一个元素，然后再将invalid-feedback 应用于另一个元素！例如 Laravel 中的以下内容：

{{-- Either following an input --}}

<input type="password" id="registerPassword"
       class="form-control @error('register_password') is-invalid @enderror"
       name="register_password" required autocomplete="new-password"
>

@error('register_password')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

{{-- Or separately in DOM --}}

@error('register_password')
    <div class="is-invalid">...</div>

    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

Answer 4

使用flex-wrap 和w-100 的技巧的工作示例：

<div class="form-group">
    <label class="form-control-label">Name</label>
    <div class="input-group flex-wrap">
        <span class="input-group-addon"><span class="fa fa-lock"></span></span>
        <input name="name" class="form-control is-invalid" type="text">
        <div class="invalid-feedback w-100">Custom error</div>
    </div>
</div>

Answer 5

我通过像这样添加d-block 解决了这个问题：

@error('terms')
    <div class="invalid-feedback d-block" role="alert">
         <strong>{{ $message }}</strong>
    </div>
@enderror

编码愉快！

这里有关于d-block:Display property的引导文档

Answer 6

将.is-invalid 添加到.input-group。

如果invalid-feedback 元素前面有一个带有.is-invalid 的元素，它将被显示——这就是支持服务器端验证的方式。

Answer 7

我找到this solution

<div class="input-group ">
    <div class="input-group-prepend">
        <div class="input-group-text">Start Date</div>
    </div>
    <input type="text" class="form-control is-invalid" placeholder="Date Input">
    <div class="invalid-feedback order-last ">
        Error Message
    </div>
    <div class="input-group-append">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
</div>

Answer 8

检查.invalid-feedback 类我发现了这个定义（bootstrap 4.3）

.invalid-feedback {
    /*display: none;*/
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

你可以复制和重命名这个类并在没有内置限制的情况下使用它

Answer 9

这是我的“DIY”答案

html

<div class="container">
<div class="row p-3">
    <div class="col-md-6 mb-3">
        <label class="sr-only">End Date/Time</label>
        <div class="input-group">
            <div class="input-group-prepend ">
                <div class="input-group-text error-feedback">Start Date</div>
            </div>
            <input type="text" class="form-control error-feedback" placeholder="Date Input">
            <div class="invalid-feedback order-last ">
                Error Message
            </div>
            <div class="input-group-append error-feedback">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>
</div>

css

.error-feedback{
    border:1px red solid;
}

我知道有点不对劲，但是，IMO 与 example 相比相当不错

Answer 10

<div class="form-group">
<label class="form-control-label">Name</label>
<div class="input-group flex-wrap">
    <span class="input-group-addon"><span class="fa fa-lock"></span></span>
    <input name="name" class="form-control is-invalid" type="text">
    <div class="invalid-feedback d-block">Custom error</div>
</div>

Answer 11

或者，您可以将 .is-valid/.is-invalid 类添加到父元素 .input-group。然后您可以更改 css 以将红色边框添加到子元素，如下所示：

.input-group.is-invalid .form-control,
        .input-group.is-invalid .custom-select {
            border-color: #FA5252;
        }

        .input-group.is-invalid .input-group-prepend .input-group-text {
            border: 1px solid #FA5252;
        }

        .input-group.is-valid .form-control,
        .input-group.is-valid .custom-select {
            border-color: #05A677;
        }

        .input-group.is-valid .input-group-prepend .input-group-text {
            border: 1px solid #05A677;
        }

Answer 12

我正在使用 Bootstrap 4.3，以下代码对我有用。尝试在输入组中添加带有“form-group”和组错误消息的“已验证”类。

<div class="form-group validated">
    <label class="form-control-label">Name</label>
    <div class="input-group">
        <span class="input-group-addon"><span class="fa fa-lock"></span></span>
        <input name="name" class="form-control is-invalid" type="text">
        <div class="invalid-feedback">Custom error</div>
    </div>
</div>

Answer 13

在我的应用中，我为 Bootstrap 的样式命名空间，这样它们就不会污染我的应用外部的样式：

.my-app {
  @import '~bootstrap/scss/bootstrap.scss';
}

通过查看生成的样式，我发现验证 css 最终会因为生成它的 mixin 而被破坏：

.was-validated .my-app:invalid ~ .invalid-feedback,
.was-validated .my-app:invalid ~ .invalid-tooltip, 
.my-app.is-invalid ~ .invalid-feedback, 
.my-app.is-invalid ~ .invalid-tooltip {
  display: block;
}

请注意，它是.my-app.is-invalid 而不是 .my-app .is-invalid。看起来这是生成它的form-validation-state-selector mixin 的结果，它有一条评论表明它是dart-sass compatibility fix 的结果。我可以做的一个技巧是将my-app 类添加到每个需要验证的输入中，但这并不理想。

我能够通过使用通配符扩展命名空间选择器来解决它，如下所示：

.my-app * {
  @import '~bootstrap/scss/bootstrap.scss';
}

Answer 14

您始终可以使用 !important 覆盖样式 将此添加到您的自定义 css 文件中

.invalid-feedback{
    display: inline !important;
}