在 Laravel 中单击提交时重复的表单验证错误

Question

我的项目中有一个注册表单，我正在服务器端对其进行验证。如果任何字段为空，则会显示 Register Controller 中定义的验证错误。问题是如果最终用户再次点击提交，同样的错误会重复，看起来很奇怪。 我该如何解决？

注册刀片

    <form id="register_forms" style="display:none" action="{{route('register' , app()->getLocale())}}">
      @csrf
       <div>
        <label for="register_name"></label>
          <input placeholder="name" id="register_name" type="text" class="form-control input @error('register_name') is-invalid @enderror" name="register_name" value="{{ old('register_name') }}" required autocomplete="register_name" autofocus/>
    
          @error('register_name')
           <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
          @enderror
       </div>
    
    
       <div>
        <label for="register_email"></label>
         <input placeholder="email" id="register_email" type="email" class=" input form-control @error('register_email') is-invalid @enderror" name="register_email" value="{{ old('register_email') }}" required autocomplete="register_email"/>
    
          @error('register_email')
           <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong></span>
          @enderror
       </div>


  <div class="some-class">
   <input  id="user_type_private" value="user" type="radio" class="radio" name="user_type" >
   <label  for="user_type_private">private</label>
    <input id="user_type_company" value="company" type="radio" class="radio" name="user_type" >
    
   <label  for="user_type_company">{{ __('Company')}}</label>
      @error('user_type')
       <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong></span>
      @enderror

    </div>
    
       <input id="my-register" type="submit" value="submit">
    
     </form>

JavaScript

<script>
  $("#my-register").click(function(e){
     e.preventDefault();
     $.ajaxSetup({
     headers: {
                   'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
               }
           });
            $.ajax({
        type: "post",
      url: "{{ route('register') }}",
      data: $('#register_forms').serialize(),
      dataType: 'json',
      success: function(data) {
            window.location = "https://carchainclassics.com/login";
        },
        error: function (err) {
            if (err.status == 422) {
                console.log(err.responseJSON);
                $('#success_message').fadeIn().html(err.responseJSON.message);

                $.each(err.responseJSON.errors, function (i, error) {
                    grecaptcha.reset();
                    var el = $(document).find('[name="'+i+'"]');
                    el.after($('<span style="color: #ff0000;">'+error[0]+'</span>'));
                });
            }
        }
    });
        });
</script>

控制器

protected function validator(array $data)
{
    $validator = Validator::make($data, [
        'register_name' => ['required', 'string', 'max:35'],
        'register_email' => ['required', 'string', 'email', 'max:255', 'unique:users,email'],
         'user_type' => ['required',Rule::in(['user', 'company']),],
    ]);
    $validator->setAttributeNames([
        'register_email' => 'email'
    ]);

    return $validator;
}

Answer 1

您只需要在每次请求之前清空 html。在您的 jquery ajax 中添加以下代码以清除消息。为每个消息跨度添加一类消息。

beforeSend: function(data) {
            window.location = "https://carchainclassics.com/login";
    $('.message').empty();
},

error: function (err) {
    if (err.status == 422) {
    console.log(err.responseJSON);
                    
    $('#success_message').fadeIn().html(err.responseJSON.message);

    $.each(err.responseJSON.errors, function (i, error) {
            grecaptcha.reset();
            var el = $(document).find('[name="'+i+'"]');
            el.after($('<span class="message" style="color: #ff0000;">'+error[0]+'</span>'));
        });
    }
}