Bootstrap 4 invalid feedback with input group not displaying

问题

I have been looking into Bootstrap 4 - beta, however when using .is-invalid with .input-group it doesn't seem to show up.

<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>

How are you meant to display an invalid message while using .input-group?

Adding the following CSS works as a workaround, but it seems odd.

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

回答1:

They haven't taken into account their own examples using input group addons and buttons, even with a column model. The markup does only facilitate "neighboring" elements, not parent > neighboring element (there is no CSS rule for that).

It seems, for now, you should fall back to Alpha 6 or program your own CSS classes accordingly. I've done the same, unfortunately.

Please note when reading my answer that this was posted just as the beta was released. :)

回答2:

Boostrap 4 is very buggy. My suggestion is to replace:

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

With:

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

And the second one looks virtually the same and will not fail.

For a better look, try:

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

回答3:

Working example with a trick using flex-wrap and 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>

回答4:

The way Bootstrap does override the display from none to block is by checking first for a previous is-invalid class, for example! Check this CSS out:

That means, in case of an error, first is-invalid must be applied on an element and then invalid-feedback on another afterward! Like the following in Laravel, for instance:

{{-- 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

回答5:

I found 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>

回答6:

I had this issue also and solved it with adding d-block like this:

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

Happy coding!

Bootstrap docs here about d-block:Display property

回答7:

To make it looks exactly the same you can use an inline if, in Laravel for example:

<input name="label" class="{{$errors->has('label') ? 'is-invalid' : '' }}">
                   @if ($errors->has('label'))
                       <div class="text-danger" role="alert">
                          <small>{{ $errors->first('code') }}</small>
                        </div>
                   @endif

回答8:

here is my "diy" answer

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

I know there is a bit off but, IMO pretty good compared this example

回答9:

You can always override styles using !important Add this to your custom css file

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

回答10:

Add .is-invalid to the .input-group.

If the invalid-feedback element is preceded by an element with .is-invalid it will be displayed -- that is how server-side validation is supported.

来源：https://stackoverflow.com/questions/45673354/bootstrap-4-invalid-feedback-with-input-group-not-displaying

标签

css

twitter-bootstrap

bootstrap-4