How can I replicate make:auth's "invalid-feedback" form validation/CSS behavior?

I really like how the make:auth scaffolding uses Bootstrap's "invalid-feedback" CSS class to provide "in-line" form validation messaging.

Example:

@if ($errors->has('amount'))
    <span class="invalid-feedback">
        {{ $errors->first('amount') }}
    </span>
@endif

However, whenever I try to use this approach for my own custom fields, it always hides the error text via a "display: none" property.

Is there some sort of Javascript that I need to incorporate? My guess was that this could be easily handled server-side only, but perhaps not?

Snapey

8 years ago

Best Answer

Level 122

You need to look a bit earlier.

The span is only displayed if it is inside a div that has the is-invalid class

    <div class="col-md-6">
        <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

        @if ($errors->has('password'))
            <span class="invalid-feedback">
                <strong>{{ $errors->first('password') }}</strong>
            </span>
        @endif
    </div>

edit . no sorry, I think it has to be adjacent element

.custom-select.is-invalid~.invalid-feedback, .custom-select.is-invalid~.invalid-tooltip, .form-control.is-invalid~.invalid-feedback, .form-control.is-invalid~.invalid-tooltip, .was-validated .custom-select:invalid~.invalid-feedback, .was-validated .custom-select:invalid~.invalid-tooltip, .was-validated .form-control:invalid~.invalid-feedback, .was-validated .form-control:invalid~.invalid-tooltip {
    display: block;
}

1 like

Please or to participate in this conversation.