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.

Sathishkumar · Accepted Answer · 2018-03-17 19:10:11Z

22

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.

edited Mar 17, 2018 at 19:10

answered Mar 17, 2018 at 19:00

Sathishkumar

3,7932 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user7747472 Over a year ago

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

Sathishkumar Over a year ago

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

Emad Over a year ago

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

Sathishkumar Over a year ago

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

Sathishkumar Over a year ago

@Eмαd Welcome ;)

user7747472 · Accepted Answer · 2018-03-17 18:53:34Z

0

Validation return JSON response for an AJAX request not as what you have mentioned in your question. You can check in the lara doc And the response you seeing in the console is a JSON array not HTML errors.

So what you can do is, you can catch any error in AJAX and check there itself if there is any error for email,message and so on. Based on that you can display error on the page.

answered Mar 17, 2018 at 18:53

user7747472

1,9726 gold badges41 silver badges84 bronze badges

Comments

user9452884 · Accepted Answer · 2018-03-17 19:04:31Z

0

<div id="error_email"></div>

Put this where you want your error to be displayed

and then in your error function

$('#error_email').html('<p>'+ xhr.responseJSON.errors.email[0] + '</p>')

answered Mar 17, 2018 at 19:04

user9452884

2831 gold badge4 silver badges13 bronze badges

Comments

Munim Munna · Accepted Answer · 2018-07-08 15:23:13Z

0

You need to remove contentType: "charset=utf-8" from Ajax options to make it work correctly.

edited Jul 8, 2018 at 15:23

Munim Munna

17.6k6 gold badges31 silver badges60 bronze badges

answered Jul 8, 2018 at 14:23

red1

616 bronze badges

Comments

Waleed Mubarik · Accepted Answer · 2020-11-14 08:42:43Z

try this hope it will help you with rendering errors after the relevant fields.

$("#booking_form").submit(function(e){
            e.preventDefault();
            let form_data = $("#booking_form").serialize()
            $(document).find("span.text-danger").remove();
            $.ajax({
                url : "your-url",
                type : "POST",
                data : form_data,
                success : function(response){

                },
                error:function (response){
                    $.each(response.responseJSON.errors,function(field_name,error){
                        $(document).find('[name='+field_name+']').after('<span class="text-strong textdanger">' +error+ '</span>')
                    })
                }
            })
        })

Collectives™ on Stack Overflow

display Laravel validation errors with AJAX

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related