Vue and Laravel Form Validation not returning 422 response

Question

I'm trying to validate form data on the backend with Laravel and Vue, but I'm not getting the 422 response.

This is in my controller function:

$this->validate($request, [
    'name' => 'required',
    'city' => 'required',
    'state' => 'required'
    ]);

    $location = $request->isMethod('put') ? 
    Locations::findOrFail($request->id) : new Locations;

    $location->id = $request->input('id');
    $location->name = $request->input('name');
    $location->address = $request->input('address');
    $location->city = $request->input('city');
    $location->state = $request->input('state');
    $location->zip = $request->input('zip');
    $location->phone = $request->input('phone');

    if($location->save())
    {
        return new LocationsResource($location);
    }

Here is the Vue method:

addLocation() {
if (this.edit === false) {
        // Add
        fetch('api/location', {
          method: 'post',
          body: JSON.stringify(this.location),
          headers: {
            'content-type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            this.clearForm();
            alert('Location Added');
            this.fetchArticles();
          });

      } else {
        // Update
        fetch('api/location', {
          method: 'put',
          body: JSON.stringify(this.location),
          headers: {
            'content-type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            this.clearForm();
            alert('Locations Updated');
            this.fetchArticles();
          })

      }
      }

Here is the form:

<form @submit.prevent="addLocation" class="mb-3">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Name" v-model="location.name">
    <input type="text" class="form-control" placeholder="City" v-model="location.city">
    <input type="text" class="form-control" placeholder="State" v-model="location.state">
  </div>

  <button type="submit" class="btn btn-light btn-block">Save</button>
</form>

When I open up the inspector and go into Network->XHR I get all the correct status codes back for CRUD, however when the form is supposed to fail I do not get back 422 HTTP status code. When I submit the form with no data, it doesnt save, but no status code gets sent, there is no response to give feedback to the user. Thanks for the help.

When I click save and intentionally fail validation, nothing happens, I get no response, no feedback. — mcornille
how could you say 'validation fails' if there is no response? — Tharaka Dilshan

mutas mutas · Accepted Answer · 2018-10-04T18:22:54

$this->validate($request, [
    'name' => 'required',
    'city' => 'required',
    'state' => 'required'
    ]);

I've never seen such usage. I don't think controller have the validate function. Try this:

$request->validate([
    'name' => 'required',
    'city' => 'required',
    'state' => 'required'
    ]);

Vue and Laravel Form Validation not returning 422 response

2 Answers