Ошибка в обработке Ajax «выполнено» и «не выполнено»

Я столкнулся с странной проблемой...

ОЖИДАЕМЫЙ поведение: если запрос успешный, на странице отображается простое предупреждение (просто чтобы проверить, работает ли оно). Если это не удается, оно должно показать сообщение об ошибке в div.

$(function() {
    $('.error').hide(); 
    $("#form").on('submit', function(e) {

        e.preventDefault();

        $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  
            }
        });

        $.ajax({
            type: 'POST',
            data: $(this).serialize(),
            url: '{{ route("admin.categories.store") }}'
        })
            .done(function(data) {
                $('.error').hide();
                alert(data.message.name); //simple alert just to check if it works
            })
            .fail(function(jqXHR) {
                errorMessage = jqXHR.responseText;
                $('.error').text(errorMessage . "<br>"); // not sure why this line is making the DONE part stop working.
                $('.error').show();
            }); 


    });
  });

Если я делаю это неудачно, он работает, но в сценарии успеха он возвращает мне только исходный json:

{"message": {"_ token": "lkqlTHGPQBWEVIAQvO8pWs8ORAsSifGyR2TDBEPo", "name": "test", "submit": "Создать категорию"}}

Я заметил, что я $('.error').text(errorMessage. "<br>"); часть, ошибка уходит и работает сценарий "Успех".

Есть идеи?