My validation not working In Bootstrap Modal using Ajax

Question

This is my ajax post of the adding form, when I console.log the data.errors , I get the value but it doesn't appears when I press the submit button.

$('#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: "",
        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(''+
                                ''+
                                '操作'+
                                ''+
                                ''+ guanyin.gylight_receipt +''+
                                ''+ guanyin.gylight_amount +''+
                                ''+ guanyin.gylight_number +''+
                                ''+ guanyin.gylight_label +''+
                                ''+ guanyin.gylight_remark +''+
                                ''+ guanyin.gylight_sdate_string +''+
                                ''+ guanyin.gylight_edate_string +''+
                                '');

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

This is my controller

    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' => '成功添加新记录',
    ]);

    
    }

This is my modal


  
       sxID:
         
              
         
  
  
       Receipt Number:
         
              
              
                  
              
         
  
  
       Amount:
         
              
          
  
  
       Light Numer:
         
              
              
                  
              
         
  
  
       Label:
         
            
         
  
  
       Remark:
         
            
         
  
  
       Start Date:
         
            
            
                  
            
         
  
  
       Due Date:

This is the console.log data.errors result

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)

This is the console.log data result

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

zahid hasan emon · Accepted Answer

you are returning errors with $validator->errors()->all() which will give you an array of error messages with numeric index. it will not use the field name as the index of the array. you have to send it like

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

this will return an array with filed name as the key and error message as the value (values in array form). and then you can do what are you doing in js end.

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

My validation not working In Bootstrap Modal using Ajax

Answers (1)

Related Questions