laravel 9: how to make validation for $jumlahcuti > $sisacuti before the form is submitted

Question

ask, permission all. I want to make a validation before the form is submitted for the type of leave that $sisa_cuti = 0, as in the form above. this is an image for the form, the value for jumlahcuti is taken from the tglmulai and sampai datepicker.

how do you do that?, so for a jumlah_cuti > $sisa_cuti will issue an error message.

I took the $sisa_cuti variable from the controller that I included below:

  $jeniscuti = DB::table('alokasicuti')
        ->join('jeniscuti','alokasicuti.id_jeniscuti','=','jeniscuti.id')
        ->where('alokasicuti.id_karyawan','=', Auth::user()->id_pegawai)
        ->get();

    $sisacuti = DB::table('alokasicuti')
        ->join('cuti','alokasicuti.id_jeniscuti','cuti.id_jeniscuti') 
        ->where('alokasicuti.id_karyawan',Auth::user()->id_pegawai)
        ->where('cuti.id_karyawan',Auth::user()->id_pegawai)
        ->where('cuti.status','=','Disetujui')
        ->selectraw('alokasicuti.durasi - cuti.jml_cuti as sisa, 
        cuti.id_jeniscuti,cuti.jml_cuti')
        ->get();
    $sisa_cuti = array();
    foreach ($sisacuti as $data) {
        $sisa_cuti[$data->id_jeniscuti] = $data->sisa;
    }
    return view('karyawan.cuti.index',compact('jeniscuti','sisa_cuti'));

I also include the code to display available leave and the rest on the create data form. this is code in view for $sisa_cuti:

<div class="form-group col-sm">
   <label for="id_jeniscuti" class="col-form-label">Kategori Cuti</label>
       <select name="id_jeniscuti" id="id_jeniscuti" class="form-control" required>
           <option>-- Pilih Kategori --</option>
           @foreach ($jeniscuti as $data)
               @if(isset($sisa_cuti[$data->id]) && $sisa_cuti[$data->id] >= 0) 
                  <option value="{{ $data->id}}">
                    (sisa cuti: {{ isset($sisa_cuti[$data->id]) ? $sisa_cuti[$data->id] : 0 }} hari) {{ $data->jenis_cuti }} 
                  </option>
               @else
                   <option value="{{ $data->id}}">
                      (cuti is available) {{ $data->jenis_cuti }} 
                   </option>
               @endif
           @endforeach
       </select> 
   </div>

and this is the jumlahcuti() function used to calculate the number of days off based on the tanggal_mulai and sampai selected by the user on the form. this is the javascript for jumlah_cuti form proccess:

     <script type="text/javascript">
     function jumlahcuti()
    {
        var start= $('#datepicker-autoclosea').val();
        var end  = $('#datepicker-autocloseb').val();

        var start_date = new Date(start);
        var end_date   = new Date(end);
        var daysOfYear = [];

        //untuk mendapatkan jumlah hari cuti
        for (var d = start_date; d <= end_date; d.setDate(d.getDate() + 1)) 
        {
            //cek workdays
            let tanggal = new Date(d);
            if(tanggal.getDay() !=0 && tanggal.getDay() !=6){
                daysOfYear.push(tanggal);
                console.log(tanggal);
            } else{
                console.log(" Hari Libur" + tanggal.getDay());
            }
        }
        //mengambil value tanggal mulai
        $('#start_date').on('change', function() {
            jumlahcuti();
        });

        //mengambil value tanggal selesai
        $('#end_date').on('change', function() {
            jumlahcuti();
        });

        console.info(daysOfYear);
        // alert('test');

        $('#jumlah').val(daysOfYear.length ?? 0);
    };
 </script>

before that i tried to make validation in the jumlahcuti() function, like this:

if (isset($sisa_cuti[request()->id_jeniscuti]) && request()->jumlah_cuti > $sisa_cuti[request()->id_jeniscuti]) 
    {
     session()->flash('error', 'Jumlah cuti yang diajukan melebihi sisa cuti yang tersisa. Silakan pilih jumlah cuti yang lebih kecil.');
     return redirect()->back();
   }

however I got an error like this:

when I use it in a function and try to select a date, the jumlahcuti form will be empty as above. and this is another javascript code that I use to make validation $jumlahcuti > $sisa_cuti:

<script>
    function validate() {
        var sisaCuti = {!! json_encode($sisa_cuti) !!};// getting value 
       of sisa_cuti from controller 
        // console.log(sisaCuti);
        var jumlah_cuti = document.getElementById("jumlah_cuti").value; // getting input value of jumlah cuti
        var id_jeniscuti = document.getElementById("id_jeniscuti").value; // getting input value of id_jeniscuti
       
        if (sisa_cuti[id_jeniscuti] < jumlah_cuti) {
            alert("Jumlah cuti yang diajukan melebihi sisa cuti yang tersisa. Silakan pilih jumlah cuti yang lebih kecil.");
            console.info(sisa_cuti[id_jeniscuti] < jumlah_cuti);
            return false;
        }
        return true;
    }
</script>

what is the solution, sir?