title: Laravel Ajax form validation error in error message displayed on validation
body: <p>I have a simple form that i'm posting via Ajax. I have already set up validation messages in the controller. below is the view form and ajax handling it:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.sounds-artist-signup').on('click', function(){
    var firstnameInput = "#artistSignup input[name='firstname']";
    var lastnameInput = "#artistSignup input[name='lastname']";
    
     $.ajax({
              type: "POST",
              url: $(this).closest('form').attr('action'),
              data: { firstname: $('#firstname').val(), lastname: $('#lastname').val()},
              beforeSend: function() { 
                  $(".sounds-artist-signup").prop('disabled', true);
              },           
          }).done(function(data){
              console.log(data);
              
          }).fail(function(xhr, textStatus, errorThrown) {
              if($('input[name="firstname"]').val().length == 0)
              {
                  if(xhr.status == 422)
                  { 
                      $(firstnameInput).addClass('is-invalid');
                      $('.invalid-feedback').text(xhr.responseJSON.errors.firstname["0"]).css('font-size','0.9rem');                    
                  }                              
              }
              if($('input[name="lastname"]').val().length == 0)
              {
                  if(xhr.status == 422)
                  { 
                      $(lastnameInput).addClass('is-invalid');
                      $('.invalid-feedback').text(xhr.responseJSON.errors.lastname["0"]).css('font-size','0.9rem');                    
                  }                              
              }
  
              $(".sounds-artist-signup").prop('disabled', false);
          });
       return false;
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="artistSignup" method="POST" action="{{ route('register') }}"&gt;
    @csrf
    
    &lt;div class="form-group"&gt;
       &lt;div class="input-group icon"&gt;
         &lt;input type="text" class="form-control{{ $errors-&gt;has('firstname') ? ' is-invalid' : '' }}" name="firstname" id="firstname" placeholder="Firstname" required="required"&gt;  
         &lt;span class="invalid-feedback"&gt;&lt;/span&gt;     
       &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="input-group icon"&gt;
         &lt;input type="text" class="form-control{{ $errors-&gt;has('lastname') ? ' is-invalid' : '' }}" name="lastname" id="lastname" placeholder="Lastname" required="required"&gt;            &lt;span class="invalid-feedback"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group sign"&gt;
      &lt;button type="submit" class="btn btn-primary login-btn btn-block sounds-artist-signup"&gt;Sign UP&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Whats happening is: if i click on the 'Sign up' button without filling in the form, validation error message is shown but both display for lastname i.e</p>
  
  <p><a href="https://i.stack.imgur.com/LBoIw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LBoIw.png" alt="enter image description here"></a></p>
  
  <p>what's going on here? kindly assist</p>