title: Error 422 when trying to validate Laravel Form via AJAX
body: <p>I have been trying to use Larave's Validator class.  I can get it to work when submitting a form normally, but when I submit via AJAX I get an error:</p>
  
  <pre><code>POST http://localhost/dashboard 422 (Unprocessable Entity)
  </code></pre>
  
  <p>Even when I try the simple version of my form:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row justify-content-center"&gt;
          &lt;div class="col-6"&gt;
              @if ($errors-&gt;any())
                  @foreach($errors-&gt;all() as $error)
                      &lt;div&gt;
                          {{ $error }}
                      &lt;/div&gt;
                  @endforeach
              @endif
              &lt;form action="/dashboard" method="post" id="test-form"&gt; 
                  @csrf
                  &lt;input type="text" name="name" id="name" /&gt;
                  &lt;input type="submit"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $('#test-form').on('submit', function(e)
      {
          e.preventDefault();
          $.post($(this).attr('action'), $(this).serialize())
          .fail(function(data)
          {
              console.log(data);
          })
          .done(function(res)
          {
              alert('done');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My Controller:</p>
  
  <pre><code>&lt;?php
  namespace App\Http\Controllers;
  use Illuminate\Http\Request;
  class DashboardController extends Controller
  {
      public function index()
      {
          return view('dashboard');
      }
  
      public function test(Request $request)
      {
          $validateData = $request-&gt;validate(['name' =&gt; 'required']);
  
          echo 'submitted';
      }
  }
  </code></pre>
  
  <p>The goal is to submit a form, but for right now I just want the errors to be returned through an AJAX request.  I am using Laravel 5.6.</p>
  
  <p>When I get the error, the Console.log does print out, and the Status Test is what is showing as Unprocessable Entity. </p>
  
  <p>Edit:  Here is the data from my console log:</p>
  
  <pre><code>{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
  abort
  :
  ƒ ( statusText )
  always
  :
  ƒ ()
  catch
  :
  ƒ ( fn )
  done
  :
  ƒ ()
  fail
  :
  ƒ ()
  getAllResponseHeaders
  :
  ƒ ()
  getResponseHeader
  :
  ƒ ( key )
  overrideMimeType
  :
  ƒ ( type )
  pipe
  :
  ƒ ( /* fnDone, fnFail, fnProgress */ )
  progress
  :
  ƒ ()
  promise
  :
  ƒ ( obj )
  readyState
  :
  4
  responseJSON
  :
  errors
  :
  {name: Array(1)}
  message
  :
  "The given data was invalid."
  __proto__
  :
  constructor
  :
  ƒ Object()
  hasOwnProperty
  :
  ƒ hasOwnProperty()
  isPrototypeOf
  :
  ƒ isPrototypeOf()
  propertyIsEnumerable
  :
  ƒ propertyIsEnumerable()
  toLocaleString
  :
  ƒ toLocaleString()
  toString
  :
  ƒ toString()
  valueOf
  :
  ƒ valueOf()
  __defineGetter__
  :
  ƒ __defineGetter__()
  __defineSetter__
  :
  ƒ __defineSetter__()
  __lookupGetter__
  :
  ƒ __lookupGetter__()
  __lookupSetter__
  :
  ƒ __lookupSetter__()
  get __proto__
  :
  ƒ __proto__()
  set __proto__
  :
  ƒ __proto__()
  responseText
  :
  "{"message":"The given data was invalid.","errors":{"name":["The name field is required."]}}"
  setRequestHeader
  :
  ƒ ( name, value )
  state
  :
  ƒ ()
  status
  :
  422
  statusCode
  :
  ƒ ( map )
  statusText
  :
  "Unprocessable Entity"
  then
  :
  ƒ ( onFulfilled, onRejected, onProgress )
  __proto__
  :
  Object
  </code></pre>