title: Validating forms with axios vuejs and laravel
body: <p>I'm trying to send some form data to my backend, but validation with Laravel isn't returning errors with 422 status.</p>
  
  <p><strong>Axios</strong></p>
  
  <p>Simple axios post request to a URL and looking to get a response back if we catch an error during request cycle.</p>
  
  <pre><code>axios.post(this.formURL, formData)
    .then((response) =&gt; {
      console.log(response)
    })
    .catch((err) =&gt; {
      console.log(err)
    })
  </code></pre>
  
  <p><strong>Laravel</strong></p>
  
  <p>I have set up Laravel Validation to validate some form inputs and return 422 if validation fails.</p>
  
  <pre><code>try {
        $this-&gt;validate(request(), [
          'chapter_id' =&gt; 'required',
          'brother_id' =&gt; 'required'
        ]);
  
        Minute::forceCreate(request());
  
        return response()-&gt;json([
            'status' =&gt; 'success',
            'message'    =&gt; 'Minute Created',
        ], 201);
    }
    catch (ValidationException $exception) {
        return response()-&gt;json([
            'status' =&gt; 'error',
            'message'    =&gt; 'Error',
            'errors' =&gt; $exception-&gt;errors(),
        ], 422);
  }
  </code></pre>
  
  <p><strong>Response</strong></p>
  
  <p>A response is given, but I get <strong>undefined</strong> in console when I try to console it out:</p>
  
  <pre><code>{
     "status":"error",
     "message":"Error",
     "errors":{
        "brother_id":[
           "The brother_id field is required."
        ],
        "chapter_id":[
           "The chapter_id field is required."
        ]
     }
  }
  </code></pre>
  
  <p>I have come across this issue here <a href="https://github.com/axios/axios/issues/960#issuecomment-398269712" rel="nofollow noreferrer">https://github.com/axios/axios/issues/960#issuecomment-398269712</a> 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. </p>
  
  <p><strong>Resolution</strong></p>
  
  <p>This issue resolved. While implementing axios interceptor to catch authentication errors, I did not return the errors back to the Promise.</p>
  
  <pre><code>  axios.interceptors.response.use(null, (error) =&gt; {
      if ( error.response.status == 401 ) {
        store.commit('logout')
        router.push('/login')
      }
  
      return Promise.reject(error)
    })
  </code></pre>
  
  <p><code>return Promise.reject(error)</code> was missing. <strong>Thanks for your help guys!</strong></p>