display Laravel validation errors with AJAX

Question

I have a Form in Laravel that submits with Ajax.every thing works well but the problem is that I can't render the validation's errors in HTML.
(I want to display the errors in <ul><li> in my HTML)

Here is my Ajax request:

 $(document).ready(function () {
        $("#submit").click(function (xhr) {
            xhr.preventDefault(),
                $.ajax({
                    type: "POST",
                    contentType: "charset=utf-8",
                    dataType: 'json',
                    url: "{{route('messages.store')}}",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    data: {
                        name: $("#name").val(),
                        email: $("#email").val(),
                        phone: $("#company").val(),
                        subject: $("#subject").val(),
                        message: $("#message").val()
                    },
                    success: function () {
                        alert('True');
                    },
                    error: function (xhr) {
                        console.log((xhr.responseJSON.errors));
                    }
                }, "json")
        })
    });

Console logs:

Thanks for any help.

Solution

Try like this

error: function (xhr) {
   $('#validation-errors').html('');
   $.each(xhr.responseJSON.errors, function(key,value) {
     $('#validation-errors').append('<div class="alert alert-danger">'+value+'</div');
 }); 
},

Here validation-errors is the div id. You can use your own div id.

Comments

[user7747472]

It does not come inside success response it come as error but yeah that will wok

[Sathishkumar Rakkiyasamy]

Can you please add the PHP code to understad why it is coming to error block?.

[Emad]

Thank you @Sathishkumar, that's exactly what I was looking for.

[Sathishkumar Rakkiyasamy]

Please check my updated answer. I have added $('#validation-errors').html('') to clear the existing error messages.

[Sathishkumar Rakkiyasamy]

@Eмαd Welcome ;)