title: My validation not working In Bootstrap Modal using Ajax
body: <p>This is my ajax post of the adding form, when I <code>console.log</code> the <code>data.errors</code> , I get the value but it doesn't appears when I press the submit button.</p>
  <pre><code>$('#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( &quot;&quot; );
    $( '#gyNumber-error' ).html( &quot;&quot; );
    $( '#gySdate-error' ).html( &quot;&quot; );
  
      $.ajax({
          url: &quot;&lt;?= route('admin.guanyin.add.api') ?&gt;&quot;,
          method: 'post',
          data:{
              _token: &quot;{{ csrf_token() }}&quot;,
              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('&lt;tr id=&quot;gyPost'+ guanyin.id +'&quot;&gt;'+
                                  '&lt;td&gt;'+
                                  '&lt;a href=&quot;#&quot; '+
                                  'data-id=&quot;'+ guanyin.id +'&quot;'+
                                  'data-gylight_receipt=&quot;'+ guanyin.gylight_receipt +'&quot;'+
                                  'data-gylight_amount=&quot;'+ guanyin.gylight_amount +'&quot;'+
                                  'data-gylight_number=&quot;'+ guanyin.gylight_number +'&quot;'+
                                  'data-gylight_label=&quot;'+ guanyin.gylight_label +'&quot;'+
                                  'data-gylight_remark=&quot;'+ guanyin.gylight_remark +'&quot;'+
                                  'data-gylight_sdate_string=&quot;'+ guanyin.gylight_sdate_string +'&quot;'+
                                  'data-gylight_edate_string=&quot;'+ guanyin.gylight_edate_string +'&quot;'+
                                  'class=&quot;btn btn-success gyEdit&quot;'+
                                  'data-toggle=&quot;modal&quot;&gt;操作&lt;/a&gt;'+
                                  '&lt;/td&gt;'+
                                  '&lt;td&gt;'+ guanyin.gylight_receipt +'&lt;/td&gt;'+
                                  '&lt;td&gt;'+ guanyin.gylight_amount +'&lt;/td&gt;'+
                                  '&lt;td&gt;'+ guanyin.gylight_number +'&lt;/td&gt;'+
                                  '&lt;td&gt;'+ guanyin.gylight_label +'&lt;/td&gt;'+
                                  '&lt;td&gt;'+ guanyin.gylight_remark +'&lt;/td&gt;'+
                                  '&lt;td&gt;'+ guanyin.gylight_sdate_string +'&lt;/td&gt;'+
                                  '&lt;td&gt;'+ guanyin.gylight_edate_string +'&lt;/td&gt;'+
                                  '&lt;/tr&gt;');
  
              $('#lastgy').remove();
              $('#guanyinModal').modal('hide');
              $('#guanyinForm').trigger('reset');
                  swal({
                      title: &quot;successfully&quot;,
                      text: data.success,
                      icon: &quot;success&quot;,
                  });
              }
              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] );
                  }
                  
              }
          }
      });         
  });
  </code></pre>
  <p><strong>This is my controller</strong></p>
  <pre><code>    public function store(Request $request)
      {   
        $validator = Validator::make($request-&gt;all(), [
          'gylight_receipt' =&gt; 'required',
          'gylight_number' =&gt; 'required',
          'gylight_sDate' =&gt; 'required',
          ],[
          'gylight_receipt.required' =&gt; 'Pls Enter the receipt number',
          'gylight_number.required' =&gt; 'Pls Enter the light number',
          'gylight_sDate.required' =&gt; 'Pls Enter the start date',
        ]);
      
      if ($validator-&gt;fails())
      {
          return response()-&gt;json(['errors'=&gt;$validator-&gt;errors()-&gt;all()]);
      }
  
        $guanyin = new Guanyin();
        $guanyin-&gt;sx_ID = $request-&gt;sx_ID;
        $guanyin-&gt;gylight_receipt  = $request-&gt;gylight_receipt;
        $guanyin-&gt;gylight_amount = $request-&gt;gylight_amount;
        $guanyin-&gt;gylight_number = $request-&gt;gylight_number;
        $guanyin-&gt;gylight_label  = $request-&gt;gylight_label;
        $guanyin-&gt;gylight_remark = $request-&gt;gylight_remark;
        $guanyin-&gt;gylight_sDate  = Carbon::createFromFormat('d/m/Y', $request-&gt;gylight_sDate)-&gt;format('Y-m-d');
        $guanyin-&gt;gylight_eDate  = Carbon::createFromFormat('d/m/Y', $request-&gt;gylight_eDate)-&gt;format('Y-m-d');
        
        $guanyin-&gt;save();
        
        Light::where('sx_ID','=',$request-&gt;sx_ID)
               -&gt;update(['gylight' =&gt; 1]);
  
        return response()-&gt;json([
          'guanyin' =&gt; $guanyin,
          'success' =&gt; '成功添加新记录',
      ]);
  
      
      }
  </code></pre>
  <p><strong>This is my modal</strong></p>
  <pre><code>&lt;form id=&quot;guanyinForm&quot;&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;sx_ID&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;sxID:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;sx_ID&quot; value=&quot;{{ $light-&gt;sx_ID }}&quot; readonly&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;gylight_receipt&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Receipt Number:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;gylight_receipt&quot;&gt;
                &lt;span class=&quot;text-danger&quot;&gt;
                    &lt;strong id=&quot;gyReceipt-error&quot;&gt;&lt;/strong&gt;
                &lt;/span&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;gylight_amount&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Amount:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
                &lt;select name=&quot;gylight_amount&quot; id=&quot;gylight_amount&quot; class=&quot;form-control&quot;&gt;
                  &lt;option&gt;Choose amount&lt;/option&gt;
                    @foreach ($gyprice as $item)
                  &lt;option data-years=&quot;{{$item-&gt;years}}&quot; value=&quot;{{ $item-&gt;gylight_amount }}&quot;&gt;                
                    RM{{ $item-&gt;gylight_amount }}
                  &lt;/option&gt;
                    @endforeach
                &lt;/select&gt;
            &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;gylight_number&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Light Numer:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;gylight_number&quot;&gt;
                &lt;span class=&quot;text-danger&quot;&gt;
                    &lt;strong id=&quot;gyNumber-error&quot;&gt;&lt;/strong&gt;
                &lt;/span&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;gylight_label&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Label:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;gylight_label&quot;&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;gylight_remark&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Remark:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;gylight_remark&quot;&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;gylight_remark&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Start Date:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;gylight_sDate&quot;&gt;
              &lt;span class=&quot;text-danger&quot;&gt;
                    &lt;strong id=&quot;gySdate-error&quot;&gt;&lt;/strong&gt;
              &lt;/span&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group row mb-2&quot;&gt;
         &lt;label for=&quot;gylight_remark&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Due Date:&lt;/label&gt;
           &lt;div class=&quot;col-sm-8&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;gylight_eDate&quot; readonly&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;col-12&quot;&gt;
               &lt;button class=&quot;btn btn-primary float-right&quot; id=&quot;guanyinAdd&quot;&gt;Submit&lt;/button&gt;
           &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is the <code>console.log</code> <code>data.errors</code> result</strong></p>
  <pre><code>Array(3)
     0: &quot;Pls Enter the receipt number&quot;
     1: &quot;Pls Enter the light number&quot;
     2: &quot;Pls Enter the start date&quot;
     length: 3
     __proto__: Array(0)
  </code></pre>
  <p><strong>This is the <code>console.log</code> <code>data</code> result</strong></p>
  <pre><code>{errors: Array(3)}
   errors:(3)[&quot;Pls Enter the receipt number&quot;,&quot;Pls Enter the light number&quot;,&quot;Pls Enter the start date&quot;]
   __proto__: Object
  </code></pre>