Bootstrap 4 invalid feedback with input group not displaying

Question

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

相关标签:

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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.