Walidacja formularza - ajax, wyświetlenie błędów

Mam taki modal

<div class="modal-body">
                        {{ csrf_field() }}
                        <input type="hidden" name="animal_id" value="0" />

                        <div class="form-group {{ $errors->has('name') ? 'has-danger' : '' }}">

                            <label for="race_name" class="form-control-label">
                                Nazwa Rasy *
                            </label>
                            <div class="input-group m-input-group m-input-group--air">
                                <span class="input-group-addon" id="basic-addon1">
                                    <i class="la la-map-marker"></i>
                                </span>
                                <input type="text" name="name" id="race_name" class="form-control m-input" placeholder="Nazwa rasy" aria-describedby="basic-addon1">
                            </div>
                            @if($errors->has('name'))
                                <div class="form-control-feedback">
                                    {{ $errors->first('name') }}
                                </div>
                            @endif

                        </div>

                        <div class="form-group {{ $errors->has('gender') ? 'has-danger' : '' }}">

                            <label for="gender" class="form-control-label">
                                Płeć *
                            </label>

                            {{ AppTools::FormDropdown($gender, 'gender', 'gender') }}

                            @if($errors->has('gender'))
                                <div class="form-control-feedback">
                                    {{ $errors->first('gender') }}
                                </div>
                            @endif
                        </div>
                </div>

i taki JS

       $('#race-form').on('submit',function(e){

        var url = '/race/register';

        e.preventDefault(e);

        $.ajax({

            type: "post",
            url: url,
            data: $( this ).serialize(),
            success: function( data ) {
                $( data ).appendTo( '#races-list' );
                $( '#m_modal_race' ).modal( 'hide' );
            },
            error: function( data ) {
                var err = data.responseJSON;
                console.log( err.errors.name ); // przykladowe pole
            }
        })
    });

bez kodu JS validacja Laravelowa świetnie działa, podswietla labelki na czerwono i inputy też dzięki $errors->has('fieldName)

jak osiągnąć dokładnie taki sam efekt w JS, jak wzbogacić ten JSowy kod?
Nie wiem czy się w ogóle w to bawić czy po prostu wyświetlić błędy nad formem...
Chyba by trzeba dodać ify i dodatkowe id dla form-group, w których dany input się znajduje etc...

Przerzuć się na Vue - zaoszczędzisz sobie wiele bólów głowy.

W tym przypadku jeżeli nie masz jakiś odgórnych wymagań/pomysłów to zostawiłbym z Laravelową walidacją.
Możesz jeszcze dodać np.: value="{{ old('name') }}" wtedy nie będziesz musiał wszystkiego wpisywać od nowa :P

Jak się upierasz na JSy to rzuć okiem na Vue w połączeniu z Axiosem - Bardzo czytelnie i wygodnie się w tym pracuje :)