I'm making a form in VueJS, during validation I call an ajax method:
submitOnboarding(){
event.preventDefault();
let Form = document.getElementById("light-study-form")
if(confirm('Voulez-vous envoyer votre dossier en étude ?')){
this.loadingSubmitForm = true
axios.post('/dossier/validation', Form)
.then(response => {
this.loadingSubmitForm = false
window.location.href = '/dossier/thanks'
})
.catch(error => {
this.laravelErrors.record(error.response.data.laravelErrors)
this.loadingSubmitForm = false
this.stepStart = 0
this.rel_backToTop()
})
}
},
which calls my laravel composer:
$validator = Validator::make($request->all(),$rules,$message);
if ($validator->fails()) {
$LaravelError=[];
foreach ($validator->errors()->getMessages() as $item=>$errorMessage){
$LaravelError[$item][]=$errorMessage;
}
$LaravelError['errorMessage'][0]='Le formulaire comporte des erreurs merci de verifier les données';
return response()->json(['laravelErrors'=>$LaravelError], 422);
}
As you can see my composer uses laravel validation facades and my concern is that my $validator->errors() returns me the list of my fields with the error message but what I get in my laravelErrors in vue is the errors of my form but not the good ones
I show you what view get:

basically view receive all the fields that are not in error and laravel returns me this:

hey, does anyone have an idea? thanks in advance !! ps:sorry for my english if i made mistakes
I tried to put all the errors in new array and return this one, but it doesn't change anything
Check the article: here
If you use bootstrap-vue, I will also recommend you to use the bootstrap-vue validation to your Laravel & VueJs application. Docs- https://bootstrap-vue.org/docs/reference/validation