我的验证在 Bootstrap Modal using Ajax 中不起作用

Question

这是我的 ajax post 添加表单，当我 console.log 和 data.errors 时，我得到了值，但是当我按下时它没有出现提交按钮。

$('#guanyinAdd').click(function(e){
  e.preventDefault();

  var id = $('#sx_ID').val();
  var receipt = $('#gylight_receipt').val();
  var amount = $('#gylight_amount').val();
  var number = $('#gylight_number').val();
  var label = $('#gylight_label').val();
  var remark = $('#gylight_remark').val();
  var sDate = $('#gylight_sDate').val();
  var eDate = $('#gylight_eDate').val();
  $( '#gyReceipt-error' ).html( "" );
  $( '#gyNumber-error' ).html( "" );
  $( '#gySdate-error' ).html( "" );

    $.ajax({
        url: "<?= route('admin.guanyin.add.api') ?>",
        method: 'post',
        data:{
            _token: "{{ csrf_token() }}",
            sx_ID: id,
            gylight_receipt: receipt,
            gylight_amount: amount,
            gylight_number: number,
            gylight_label: label,
            gylight_remark: remark,
            gylight_sDate: sDate,
            gylight_eDate: eDate
        },
        success: function(data){
            if(data.success) {
            var guanyin = data.guanyin;
            $('#gyFee').prepend('<tr id="gyPost'+ guanyin.id +'">'+
                                '<td>'+
                                '<a href="#" '+
                                'data-id="'+ guanyin.id +'"'+
                                'data-gylight_receipt="'+ guanyin.gylight_receipt +'"'+
                                'data-gylight_amount="'+ guanyin.gylight_amount +'"'+
                                'data-gylight_number="'+ guanyin.gylight_number +'"'+
                                'data-gylight_label="'+ guanyin.gylight_label +'"'+
                                'data-gylight_remark="'+ guanyin.gylight_remark +'"'+
                                'data-gylight_sdate_string="'+ guanyin.gylight_sdate_string +'"'+
                                'data-gylight_edate_string="'+ guanyin.gylight_edate_string +'"'+
                                'class="btn btn-success gyEdit"'+
                                'data-toggle="modal">操作</a>'+
                                '</td>'+
                                '<td>'+ guanyin.gylight_receipt +'</td>'+
                                '<td>'+ guanyin.gylight_amount +'</td>'+
                                '<td>'+ guanyin.gylight_number +'</td>'+
                                '<td>'+ guanyin.gylight_label +'</td>'+
                                '<td>'+ guanyin.gylight_remark +'</td>'+
                                '<td>'+ guanyin.gylight_sdate_string +'</td>'+
                                '<td>'+ guanyin.gylight_edate_string +'</td>'+
                                '</tr>');

            $('#lastgy').remove();
            $('#guanyinModal').modal('hide');
            $('#guanyinForm').trigger('reset');
                swal({
                    title: "successfully",
                    text: data.success,
                    icon: "success",
                });
            }
            if(data.errors) { 
              console.log(data.errors);

                if(data.errors.gylight_receipt){
                    $( '#gyReceipt-error' ).html( data.errors.gylight_receipt[0] );
                }
                if(data.errors.gylight_number){
                    $( '#gyNumber-error' ).html( data.errors.gylight_number[0] );
                }
                if(data.errors.gylight_sDate){
                    $( '#gySdate-error' ).html( data.errors.gylight_sDate[0] );
                }
                
            }
        }
    });         
});

这是我的控制器

    public function store(Request $request)
    {   
      $validator = Validator::make($request->all(), [
        'gylight_receipt' => 'required',
        'gylight_number' => 'required',
        'gylight_sDate' => 'required',
        ],[
        'gylight_receipt.required' => 'Pls Enter the receipt number',
        'gylight_number.required' => 'Pls Enter the light number',
        'gylight_sDate.required' => 'Pls Enter the start date',
      ]);
    
    if ($validator->fails())
    {
        return response()->json(['errors'=>$validator->errors()->all()]);
    }

      $guanyin = new Guanyin();
      $guanyin->sx_ID = $request->sx_ID;
      $guanyin->gylight_receipt  = $request->gylight_receipt;
      $guanyin->gylight_amount = $request->gylight_amount;
      $guanyin->gylight_number = $request->gylight_number;
      $guanyin->gylight_label  = $request->gylight_label;
      $guanyin->gylight_remark = $request->gylight_remark;
      $guanyin->gylight_sDate  = Carbon::createFromFormat('d/m/Y', $request->gylight_sDate)->format('Y-m-d');
      $guanyin->gylight_eDate  = Carbon::createFromFormat('d/m/Y', $request->gylight_eDate)->format('Y-m-d');
      
      $guanyin->save();
      
      Light::where('sx_ID','=',$request->sx_ID)
             ->update(['gylight' => 1]);

      return response()->json([
        'guanyin' => $guanyin,
        'success' => '成功添加新记录',
    ]);

    
    }

这是我的模态

<form id="guanyinForm">
  <div class="form-group row mb-2">
       <label for="sx_ID" class="col-sm-4 col-form-label">sxID:</label>
         <div class="col-sm-8">
              <input type="text" class="form-control" id="sx_ID" value="{{ $light->sx_ID }}" readonly>
         </div>
  </div>
  <div class="form-group row mb-2">
       <label for="gylight_receipt" class="col-sm-4 col-form-label">Receipt Number:</label>
         <div class="col-sm-8">
              <input type="text" class="form-control" id="gylight_receipt">
              <span class="text-danger">
                  <strong id="gyReceipt-error"></strong>
              </span>
         </div>
  </div>
  <div class="form-group row mb-2">
       <label for="gylight_amount" class="col-sm-4 col-form-label">Amount:</label>
         <div class="col-sm-8">
              <select name="gylight_amount" id="gylight_amount" class="form-control">
                <option>Choose amount</option>
                  @foreach ($gyprice as $item)
                <option data-years="{{$item->years}}" value="{{ $item->gylight_amount }}">                
                  RM{{ $item->gylight_amount }}
                </option>
                  @endforeach
              </select>
          </div>
  </div>
  <div class="form-group row mb-2">
       <label for="gylight_number" class="col-sm-4 col-form-label">Light Numer:</label>
         <div class="col-sm-8">
              <input type="text" class="form-control" id="gylight_number">
              <span class="text-danger">
                  <strong id="gyNumber-error"></strong>
              </span>
         </div>
  </div>
  <div class="form-group row mb-2">
       <label for="gylight_label" class="col-sm-4 col-form-label">Label:</label>
         <div class="col-sm-8">
            <input type="text" class="form-control" id="gylight_label">
         </div>
  </div>
  <div class="form-group row mb-2">
       <label for="gylight_remark" class="col-sm-4 col-form-label">Remark:</label>
         <div class="col-sm-8">
            <input type="text" class="form-control" id="gylight_remark">
         </div>
  </div>
  <div class="form-group row mb-2">
       <label for="gylight_remark" class="col-sm-4 col-form-label">Start Date:</label>
         <div class="col-sm-8">
            <input type="text" class="form-control" id="gylight_sDate">
            <span class="text-danger">
                  <strong id="gySdate-error"></strong>
            </span>
         </div>
  </div>
  <div class="form-group row mb-2">
       <label for="gylight_remark" class="col-sm-4 col-form-label">Due Date:</label>
         <div class="col-sm-8">
            <input type="text" class="form-control" id="gylight_eDate" readonly>
         </div>
  </div>
  <div class="row">
         <div class="col-12">
             <button class="btn btn-primary float-right" id="guanyinAdd">Submit</button>
         </div>
  </div>

这是console.logdata.errors结果

Array(3)
   0: "Pls Enter the receipt number"
   1: "Pls Enter the light number"
   2: "Pls Enter the start date"
   length: 3
   __proto__: Array(0)

这是console.logdata结果

{errors: Array(3)}
 errors:(3)["Pls Enter the receipt number","Pls Enter the light number","Pls Enter the start date"]
 __proto__: Object

Answer 1

您 return 使用 $validator->errors()->all() 出错，这将为您提供一组带有数字索引的错误消息。它不会使用字段名称作为数组的索引。你必须像

一样发送

return response()->json(['errors' => $validator->errors()]);

这将return一个以文件名为键、错误信息为值的数组（数组形式的值）。然后你就可以在js端做你在做什么了

if (data.errors.gylight_receipt) {
    $( '#gyReceipt-error' ).html( data.errors.gylight_receipt[0] );
}

我的验证在 Bootstrap Modal using Ajax 中不起作用

My validation not working In Bootstrap Modal using Ajax

console

jquery

laravel

bootstrap-modal