Ошибка проверки формы Laravel Ajax в сообщении об ошибке, отображаемом при проверке

Question

У меня есть простая форма, которую я публикую через Ajax.Я уже настроил сообщения проверки в контроллере.ниже приведена форма просмотра и обработка ajax:

$('.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;
    });

<form id="artistSignup" method="POST" action="{{ route('register') }}">
  @csrf
  
  <div class="form-group">
     <div class="input-group icon">
       <input type="text" class="form-control{{ $errors->has('firstname') ? ' is-invalid' : '' }}" name="firstname" id="firstname" placeholder="Firstname" required="required">  
       <span class="invalid-feedback"></span>     
     </div>
  </div>
  <div class="form-group">
    <div class="input-group icon">
       <input type="text" class="form-control{{ $errors->has('lastname') ? ' is-invalid' : '' }}" name="lastname" id="lastname" placeholder="Lastname" required="required">            <span class="invalid-feedback"></span>
    </div>
  </div>
  <div class="form-group sign">
    <button type="submit" class="btn btn-primary login-btn btn-block sounds-artist-signup">Sign UP</button>
</div>
</form>

Что происходит: если я нажимаю кнопку «Зарегистрироваться» без заполнения формы, появляется сообщение об ошибке проверки, но оба отображаются для фамилии, т.е.

что здесь происходит?любезно помочь

Answer 1

Вы используете один и тот же класс для сообщения, поэтому javascript переопределяет все селекторы

Метод 1

Используйте разные классы для каждого сообщения, то есть: вместо использования

<span class="invalid-feedback"></span>

использовать уникальный класс

<span class="firstname-invalid-feedback"></span>

Метод 2

Использовать селектор jquery .next ()

$(firstnameInput).next('.invalid-feedback').text(xhr.responseJSON.errors.firstname["0"]).css('font-size','0.9rem');