Validating forms with axios vuejs and laravel

Question

I'm trying to send some form data to my backend, but validation with Laravel isn't returning errors with 422 status.

Axios

Simple axios post request to a URL and looking to get a response back if we catch an error during request cycle.

axios.post(this.formURL, formData)
  .then((response) => {
    console.log(response)
  })
  .catch((err) => {
    console.log(err)
  })

Laravel

I have set up Laravel Validation to validate some form inputs and return 422 if validation fails.

try {
      $this->validate(request(), [
        'chapter_id' => 'required',
        'brother_id' => 'required'
      ]);

      Minute::forceCreate(request());

      return response()->json([
          'status' => 'success',
          'message'    => 'Minute Created',
      ], 201);
  }
  catch (ValidationException $exception) {
      return response()->json([
          'status' => 'error',
          'message'    => 'Error',
          'errors' => $exception->errors(),
      ], 422);
}

Response

A response is given, but I get undefined in console when I try to console it out:

{
   "status":"error",
   "message":"Error",
   "errors":{
      "brother_id":[
         "The brother_id field is required."
      ],
      "chapter_id":[
         "The chapter_id field is required."
      ]
   }
}

I have come across this issue here https://github.com/axios/axios/issues/960#issuecomment-398269712 but was unable to get past this using their resolution methods. Has anyone come across this issue before? Could this be authentication relation (not likely), that's the last thing I implemented.

Resolution

This issue resolved. While implementing axios interceptor to catch authentication errors, I did not return the errors back to the Promise.

  axios.interceptors.response.use(null, (error) => {
    if ( error.response.status == 401 ) {
      store.commit('logout')
      router.push('/login')
    }

    return Promise.reject(error)
  })

return Promise.reject(error) was missing. Thanks for your help guys!

Answer 1

I think the message is quite clear ("The chapter_id field is required."). It seems that the problem is not the result of axios, but that the relevant data values ​​are not passed on to the server. Please check whether the data is transmitted to server by using

return $ request;

command on server side (start of your controller). If the data is not transmitted, check the front-end carefully. If the data is transmitted try to change scope.

try {
  $this->validate(request(), [
    'chapter_id' => 'required',
    'brother_id' => 'required'
  ]);
}
catch (ValidationException $exception) {
  return response()->json([
      'status' => 'error',
      'message'    => 'Error',
      'errors' => $exception->errors(),
  ], 422);
}
Minute::forceCreate(request());

return response()->json([
     'status' => 'success',
     'message'    => 'Minute Created',
], 201);

So debug it.