Why am I getting error code 422?

Question

I am making a POST request but can not get anything but 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 1

Laravel allows you to define specific checks in the fields that it accepts. If you refuse these validations, he will return HTTP 422 - Unprocessable Entity. In your particular case, it seems that you are not running your own validation tests with an empty skeletal object, as it is required companyName, and an empty line does not pass the required verification.

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

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