Show all laravel validation errors in one div when using jQuery ajax

Question

I'm using this ajax request to send request using jQuery:

 $.ajax({type: 'POST',
             url: '/send-review',
             data: {
                 "_token": "{{ csrf_token() }}",
                 "_id": {{$item->id}},
             },
             success: function (data) {
                 console.log(data);
             },
             error: function (err) {if (err.status == 422) { 
// when status code is 422, it's a validation issue

        }
    }
   });

I can show get Laravel validation error in the bottom of each input, but how can I show all of the Laravel validation errors format in one box of HTML using jQuery?

it's better to use if( err.status == 422 || err.status == 400 ) for validation problems — Yasser CHENIK
– Yasser CHENIK, Commented Mar 31, 2022 at 15:05
Thanks, @YasserCHENIK but why I must use 400 error code for validation until I can use 422? — Majid Jalilian
– Majid Jalilian, Commented Apr 5, 2022 at 7:48
400 is the generic error code that means bad request, you can see this post for more details — Yasser CHENIK
– Yasser CHENIK, Commented Apr 5, 2022 at 10:50

Sagar Roy · Accepted Answer · 2020-04-27 00:59:00Z

1

There are lots of way you can show messages . You can print error object . like as

var htmlErr= []
var err.errors.map((data,index)=>{
   $(".comment").text(data.comment);  
});

in html

<p class="comment"></p>

then you can try with like this. For more error message more class ..

Its just dummy code for accurate code i need to know details about your data/object.

edited Apr 27, 2020 at 0:59

answered Apr 27, 2020 at 0:40

Sagar Roy

4434 silver badges12 bronze badges

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

1 Comment

Majid Jalilian Over a year ago

Laravel Validation errors are like this : "errors":{"comment":["The comment field is required."]

Yasser CHENIK · Accepted Answer · 2022-04-06 11:40:14Z

1

laravel 8

I always use this :

$.ajax({type: 'POST',

             ...

             success: function (data) {
                 console.log(data);
             },
             error: function (err) {
               if (err.status == 422) { 
                   toastError(err.responseJSON.message);
                   let details = res.responseJSON.errors ;
                   Object.keys(details).forEach(field => {
                      formatErrorUsingClassesAndPopover(field,details[field]);
                   });
               }
            }
        });

And for Formatting the answer implement the formatErrorUsingClassesAndPopover( element , array_of_problems ) make it as abstract as possible . for example (Using Bootstrap and jQuery):

 function formatErrorUsingClassesAndPopover(element , array_of_problems ){
       let someHTML = '';
       array_of_problems.forEach(function(e){someHTML+='<li>'+e+'</li>'});
       $('#'+element+'_error_section').html('<ul>'+someHTML+'</ul>');
       $('#'+element).addClass('is-invalid');
 }

 ...

 //don't forget to use this in the ajax success function :
 $('input').removeClass('is-invalid');//or you can let the client side validation do it

Note : To copy past this code you need that if your database column is `field` ,you need :

your error section's id to be field_error_section .
your input's id to be field .

edited Apr 6, 2022 at 11:40

answered Apr 1, 2022 at 9:51

Yasser CHENIK

4051 gold badge7 silver badges19 bronze badges

1 Comment

Yasser CHENIK Over a year ago

Use the bootstrap class invalid-feedback in your error_section's div

Collectives™ on Stack Overflow

Show all laravel validation errors in one div when using jQuery ajax

2 Answers 2

1 Comment

laravel 8

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

laravel 8

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related