Validation ajax

Bonjour,

Voila je rencontre un petit problème avec mon code.

Code HTML

<form id="p-create" action="{{ route('admin.property.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="title">Titre</label>
                        <input type="text" id="title" name="title" class="form-control{!! $errors->has('title') ? ' is-invalid' : '' !!}" value="{{ old('title') }}">
                        <p class="text-danger">{{ $errors->first('title') }}</p>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="rooms">Nombre de chambre</label>
                        <input type="number" id="rooms" name="rooms" class="form-control{!! $errors->has('rooms') ? ' is-invalid' : '' !!}" value="{{ old('rooms') }}">
                        <p class="text-danger">{{ $errors->first('rooms') }}</p>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="bedrooms">Nombre de pieces</label>
                        <input type="number" id="bedrooms" name="bedrooms" class="form-control{!! $errors->has('bedrooms') ? ' is-invalid' : '' !!}" value="{{ old('bedrooms') }}">
                        <p class="text-danger">{{ $errors->first('bedrooms') }}</p>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="floor">Etage</label>
                        <input type="number" id="floor" name="floor" class="form-control{!! $errors->has('floor') ? ' is-invalid' : '' !!}" value="{{ old('floor') }}">
                        <p class="text-danger">{{ $errors->first('floor') }}</p>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="surface">Surface</label>
                        <input type="number" id="surface" name="surface" class="form-control{!! $errors->has('surface') ? ' is-invalid' : '' !!}" value="{{ old('surface') }}">
                        <p class="text-danger">{{ $errors->first('surface') }}</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="city">Ville</label>
                        <input type="text" id="city" name="city" class="form-control{!! $errors->has('city') ? ' is-invalid' : '' !!}" value="{{ old('city') }}">
                        <p class="text-danger">{{ $errors->first('city') }}</p>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" id="address" name="address" class="form-control{!! $errors->has('address') ? ' is-invalid' : '' !!}" value="{{ old('address') }}">
                        <p class="text-danger">{{ $errors->first('address') }}</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="postal_code">Code postal</label>
                        <input type="number" id="postal_code" name="postal_code" class="form-control{!! $errors->has('postal_code') ? ' is-invalid' : '' !!}" value="{{ old('postal_code') }}">
                        <p class="text-danger">{{ $errors->first('postal_code') }}</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="heat">Chauffage</label>
                        <select class="form-control" name="heat" id="heat">
                            <option value="Gaz" {!! old('heat') === 'Gaz' ? 'selected' : '' !!}>Gaz</option>
                            <option value="Electric" {!! old('heat') === 'Electric' ? 'selected' : '' !!}>Electric</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label for="price">Prix</label>
                        <input type="number" id="price" name="price" class="form-control{!! $errors->has('price') ? ' is-invalid' : '' !!}" value="{{ old('price') }}">
                        <p class="text-danger">{{ $errors->first('price') }}</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="">Images(une ou 4 images)</label>
                        <input type="file" name="image[]" class="form-control{!! $errors->has('image') ? ' is-invalid' : '' !!}" multiple>
                        <p class="text-danger">{{ $errors->first('image') }}</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="type">Type de biens</label>
                        <select class="form-control" name="type_id" id="type">
                            @foreach($types as $type)
                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="options">Options</label>
                        <select class="form-control select2" name="options[]" id="options" multiple>
                            @foreach($options as $option)
                                <option value="{{ $option->id }}">{{ $option->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea name="description" id="description" cols="30" rows="5" class="form-control{!! $errors->has('description') ? ' is-invalid' : '' !!}">{{ old('description') }}</textarea>
                        <p class="text-danger">{{ $errors->first('description') }}</p>
                    </div>
                </div>
            </div>
            <button class="btn btn-primary">Enregister</button>
        </form>

Code Js

$(document).ready(function () {

        var form = $('#p-create');

        form.submit(function(e) {

            e.preventDefault();
            $.ajax({
                url     : form.attr('action'),
                type    : form.attr('method'),
                data    : form.serialize(),
                dataType: 'json',
                success : function (xhr )
                {

                },
                error: function(xhr)
                {
                    if(xhr.status != 200) {
                        var errors = xhr.responseJSON.errors;
                        console.log(errors);
                        var errorsKey = Object.keys(errors);
                        for (var i = 0; i < errorsKey.length; i++) {
                            var key = errorsKey[i];
                            var  error = errors[key].join('');

                            var input = document.querySelector(`#${key}`);
                            var p = document.createElement('p');
                            p.className = 'text-danger';
                            p.innerHTML = error;
                            input.classList.add('is-invalid');
                            input.parentNode.appendChild(p);
                        }
                    } else {

                    }
                }
            });
        });

    });

Ce que je veux

J'aimerai que a la soumission du formulaire les erreurs s'affiche en bas des champs

Ce que j'obtiens

Pour certains champs il y as pas de probleme mais pour certains le code ne s'applique. Je ne vois pas ou vais commis d'erreur. Regarder vous aussi pour voir. Merci