Question

我有一个简单的表单，我通过Ajax发布。我已经在控制器中设置了验证消息。下面是视图表单和处理它的ajax：

＆＃13;

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

＆＃13;

<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>

＆＃13;

发生的事情是：如果我点击＆＃39;注册＆＃39;没有填写表格的按钮，显示验证错误信息，但都显示为姓氏，即

这里发生了什么？请帮助

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');

验证时显示的错误消息中的Laravel Ajax表单验证错误

1 个答案: