How to show validation message below a group of radio buttons?

Question

For the problem below consider that I am using Laravel (5.6* with default style files and javascript (no changes).

My problem is basically when trying to display the validation message from the field group radio (id: genero), these are grouped in a fieldset. Validation occurs and in HTML (DOM) returned you can see the present message, but it is not being displayed on the screen.

Controller:

$this->validate($request, [
    'name' => 'required|min:3',
    'profissao' => 'min:3',
    'biografia' => 'min:20',
    'genero' => 'required|in:F,M,Não declarado',
    'data_nascimento' => 'required'
]);

//...

View:

@if (session('status'))
    <div class="alert alert-{{ session('status') }}">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        {{ session('msg') }}
    </div>
@endif

<!-- //... -->

<div class="form-group row">
    <label for="genero" class="col-md-4 col-form-label text-md-right">Gênero</label>

    <div class="col-md-6">
        <fieldset id="genero">
            <div class="form-check">
                <label class="form-check-label">
                    <input type="radio" class="form-check-input{{ $errors->has('genero') ? ' is-invalid' : '' }}" name="genero" value="F" {{ $usuario->genero == 'F' ? 'checked' : '' }}>
                    Feminino
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input type="radio" class="form-check-input{{ $errors->has('genero') ? ' is-invalid' : '' }}" name="genero" value="M" {{ $usuario->genero == 'M' ? 'checked' : '' }}>
                    Masculino
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input type="radio" class="form-check-input{{ $errors->has('genero') ? ' is-invalid' : '' }}" name="genero" value="Não declarado" {{ $usuario->genero == 'Não declarado' ? 'checked' : '' }}>
                    Não declarado
                </label>
            </div>
        </fieldset>

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

Answer 1

The problem lies in Bootstrap’s own rule. By syntax rules you should arrange the layout of the elements on the screen as per this documentation.

However, since I believe your layout is already set, and you only render the error from your javascript if, you can override your own rule .invalid-feedback adding this to your css:

.invalid-feedback {
    display: block
} 

This way the element will always be visible, and the validation of whether it should be shown or not will be done by your @if.

Just make sure that piece of code is below your bootstrap call.