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, Mar 31 '22 at 15:05
Thanks, @YasserCHENIK but why I must use 400 error code for validation until I can use 422? — Majid Jalilian, Apr 05 '22 at 07:48
`400` is the generic error code that means `bad request`, you can see [this](https://stackoverflow.com/questions/31323100/http-status-400-validation-versus-verification#:~:text=You%20can%20use%20400%20for,concerned%20about%20if%20it's%20200.) post for more details — Yasser CHENIK, Apr 05 '22 at 10:50

Sagar Roy · Accepted Answer · 2020-04-27T00:59:00.930

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 '20 at 00:59

answered Apr 27 '20 at 00:40

Sagar Roy

433
4
12

1

Laravel Validation errors are like this : "errors":{"comment":["The comment field is required."] – Majid Jalilian Apr 27 '20 at 00:49

Yasser CHENIK · Answer 2 · 2022-04-06T11:40:14.960

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 .

Use the bootstrap class `invalid-feedback` in your `error_section`'s div — Yasser CHENIK, Apr 01 '22 at 09:58

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

2 Answers2

laravel 8