0

i need some help. I want to store multiple data and validation using laravel ajax, and i want to display error validation like that :enter image description here

In inspect elemen, error validation is displayed, but when i want displayed in bottom form input, error validation not displayed.

This my validation in controller

$val    =    Validator::make($request->all(), [
                 'nim.*'     =>  'required',
                 'abs.*'     =>  'required|numeric|between:1,100.00',
                 'tgs.*'     =>  'required|numeric|between:1,100.00',
                 'utsm.*'    =>  'required|numeric|between:1,100.00',
                 'uasm.*'    =>  'required|numeric|between:1,100.00',
             ],
             [
                 'nim.*.required'    =>  'NIM harus diisi',
                 'abs.*.required'    =>  'Kehadiran harus diisi',
                 'abs.*.numeric'     =>  'Kehadiran harus angka',
                 'abs.*.between'     =>  'Kehadiran antara angka 1.00 - 100.00',
                 'tgs.*.required'    =>  'Tugas harus diisi',
                 'tgs.*.numeric'     =>  'Tugas harus angka',
                 'tgs.*.between'     =>  'Tugas antara angka 1.00 - 100.00',
                 'utsm.*.required'   =>  'UTS harus diisi',
                 'utsm.*.numeric'    =>  'UTS harus angka',
                 'utsm.*.between'    =>  'UTS antara angka 1.00 - 100.00',
                 'uasm.*.required'   =>  'UAS harus diisi',
                 'uasm.*.numeric'    =>  'UAS harus angka',
                 'uasm.*.between'    =>  'UAS antara angka 1.00 - 100.00',
             ]);

            if($val->fails()) {
                return response()->json(['error' => $val->errors()]);
            }

This my view for form input data and ajax

<form id="storeNilai" method="post">
@csrf

<tbody>
  @php $no = 1; @endphp
  @foreache ($mahasiswa as $mhs)
    <tr>
      <td class="text-center">{{ $no++ }}</td>
      <td>
        <input type="hidden" name="nim[]" id="nim[]" value="{{ $mhs->nim }}" readonly>
        {{ $mhs->nim }}
      </td>
      <td>{{ $mhs->name }}</td>
      <td>
        <input type="text" class="form-control" size="1" name="abs[]" id="abs[]">
        <div class="fv-plugins-message-container">
          <div class="fv-help-block" id="abs_error"></div>
        </div>
      </td>

      <td>
        <input type="text" class="form-control" size="1" name="tgs[]" id="tgs[]">
          <div class="fv-plugins-message-container">
            <div class="fv-help-block" id="tgs_error"></div>
          </div>
      </td>

      <td>
        <input type="text" class="form-control" size="1" name="utsm[]" id="utsm[]">
        <div class="fv-plugins-message-container">
          <div class="fv-help-block" id="utsm_error"></div>
        </div>
      </td>

      <td>
        <input type="text" class="form-control" size="1" name="uasm[]" id="uasm[]">
        <div class="fv-plugins-message-container">
          <div class="fv-help-block" id="uasm_error"></div>
        </div>
      </td>
    </tr>
  @endforeach
</tbody>
<button type="submit" class="btn btn-primary ml-1">Simpan</button>
</form>

<script>
$(document).ready(function () {
  $('#storeNilai').on('submit', function (e) {
    e.preventDefault();

    $('#abs_error').html();
    $('#tgs_error').html();
    $('#utsm_error').html();
    $('#uasm_error').html();

    $.ajax({
      url: "{{ route('input-nilai.post') }}",
      method: 'POST',
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      dataType:"json",

      success: function(data) {
        if(data.errors) {
          if(data.error.abs) {
            $("#abs_error").html(data.error.abs[0]);
            $("#abs").addClass("is-invalid");
          }

          if(data.error.tgs) {
            $("#tgs_error").html(data.error.tgs[0]);
            $("#tgs").addClass("is-invalid");
          }

          if(data.error.utsm) {
            $("#utsm_error").html(data.error.utsm[0]);
            $("#utsm").addClass("is-invalid");
          }

          if(data.error.uasm) {
            $("#uasm_error").html(data.error.uasm[0]);
            $("#uasm").addClass("is-invalid");
          }
        }
      },
    });
  });
});
</script>

Thank's for your help.

Franky
  • 31
  • 3
  • You are using the same `id` for each of the elements meaning there is no way to differentiate between them. Try using e.g. `id="nim[{{$loop->index}}]"` do you can have a different ID per element based on the row – apokryfos Dec 24 '22 at 15:39

0 Answers0