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

Question

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

Navigation

#1 by (1 votes)

0

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

My problem is basically when trying to display the validation message of the radio (id: gender) field group, these are grouped in a fieldset . The validation occurs and in the HTML (DOM) returned with you to see the present message, however, 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>

laravel laravel-blade

asked by anonymous 14.03.2018 / 20:16

1 answer

Capture the IP and local machine name Improve visual information in Chart.js

score 1 · Accepted Answer

The problem is with Bootstrap itself. By the syntax rules you should arrange the elements on the screen as this documentation .

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

.invalid-feedback {
    display: block
}

In this way the element will always be visible, and the validation of whether it should be shown or not by its @if .

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