title: Unable to process form fields in ajax with Laravel
body: <p>I am using Laravel 7 and PHP 7.4. I'm submitting my form using ajax call and getting a Json response to show the relevant errors, if any.</p>
  <p>I <code>serialize()</code> the form in the ajax call. My issue is that I'm getting <code>422 Unprocessable Entity</code> against each field I applied validation to.</p>
  <p>Surprising thing is that if my field is not empty, I still get <strong>required</strong> error that's weird.</p>
  <p>I found the fact that people who have faced this issue in past, either have switched to another approach or got a solution by hit and trial method.  My validation is according to Laravel doc.</p>
  <p>Why am I getting this error and what's the proper solution?</p>
  <p>Blade view</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form method=&quot;POST&quot; name=&quot;register_name&quot; id=&quot;register_forms&quot; action=&quot;{{ route('verifydata') }}&quot;&gt;
      @csrf
      &lt;input placeholder=&quot;Name&quot; id=&quot;register_name&quot; type=&quot;text&quot; /&gt;
      &lt;input id=&quot;my-register&quot; type=&quot;submit&quot; value=&quot;Continue&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Javascript</p>
  <pre class="lang-js prettyprint-override"><code>$(&quot;#my-register&quot;).click(function(e) {
      e.preventDefault();
  
      var _token = $('input[name=&quot;_token&quot;]').val();
      var data = $('#register_forms').serialize()
      $.ajax({
          type: &quot;post&quot;,
          url: &quot;{{ url('verifydata') }}&quot;,
          data: {
              _token: _token,
              data: data
          },
          dataType: 'json',
          success: function(data) {
              $('#success_message').fadeIn().html(data.message);
          },
          error: function(err) {
              if (err.status == 422) { // when status code is 422, it's a validation issue
                  console.log(err.responseJSON);
                  $('#success_message').fadeIn().html(err.responseJSON.message);
  
                  console.warn(err.responseJSON.errors);
                  $.each(err.responseJSON.errors, function(i, error) {
                      var el = $(document).find('[name=&quot;' + i + '&quot;]');
                      el.after($('&lt;span style=&quot;color: red;&quot;&gt;' + error[0] + '&lt;/span&gt;'));
                  });
              }
          }
      });
      /**Ajax code ends**/
  });
  </code></pre>
  <p>Controller</p>
  <pre class="lang-php prettyprint-override"><code>public function verifydata(Request $request)
  {
      $this-&gt;validate($request, [
          'name' =&gt; 'required', 'string', 'max:255',
      ]);
  
      $name = $request-&gt;register_name;
  
      return response()-&gt;json([
          'message' =&gt; $name
      ]);
  }
  </code></pre>