Why am I getting a 422 error code?

Donnie picture Donnie · May 10, 2016 · Viewed 26.3k times · Source

I am making a POST request, but unable to get anything besides a 422 response.

Vue.js client code:

new Vue({
  el: '#app',

  data: {
    form: {
      companyName: '',
      street: '',
      city: '',
      state: '',
      zip: '',
      contactName: '',
      phone: '',
      email: '',
      numberOfOffices: 0,
      numberOfEmployees: 0,
    }
  },

  methods: {
    register: function() {
      this.$http.post('/office-depot-register', this.form).then(function (response) {

        // success callback
        console.log(response);

      }, function (response) {

        // error callback
        console.log(response);

      });
    }
  }
});

Laravel Routes:

Route::post('/office-depot-register', ['uses' => 'OfficeDepotController@register', 'as' => 'office-depot-register']);

Laravel Controller:

public function register(Request $request)
{
    $this->validate($request, [
        'companyName' => 'required',
        // ...
    ]);

    // ...
}

Answer

Brandon Anzaldi picture Brandon Anzaldi · May 10, 2016

Laravel allows you to define certain validations on fields it accepts. If you fail these validations, it will return HTTP 422 - Unprocessable Entity. In your particular case, it appears that you're failing your own validation tests with an empty skeleton object, since companyName is required, and an empty string does not pass the required validation.

Assuming the other fields are similarly validated, a populated data object should solve your issue.

data: {
  form: {
    companyName: 'Dummy Company',
    street: '123 Example Street',
    city: 'Example',
    state: 'CA',
    zip: '90210',
    contactName: 'John Smith',
    phone: '310-555-0149',
    email: '[email protected]',
    numberOfOffices: 1,
    numberOfEmployees: 2,
  }
}