Laravel validator error with a vuejs form

61 Views Asked by At

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: enter image description here

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

enter image description here

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

1

There are 1 best solutions below

1
Hasinur Rahman On

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