How to validate Laravel textinput with keyup using jQuery

In my Laravel-5.8, I have this controller:

public function create()
{ 
   return view('goals.create')
        ->with('goaltypes', $goaltypes)
}

public function store(StoreAppraisalGoalRequest $request)
{      
    $userCompany = Auth::user()->company_id;
    $employeeId = Auth::user()->employee_id;

    try {
      $goal = new AppraisalGoal();
      $goal->employee_id              = $employeeId; 
      $goal->weighted_score           = $request->weighted_score;
      $goal->goal_title               = $request->goal_title;                   
      $goal->save();
     }
     
        Session::flash('success', 'Goal is created successfully');
        return redirect()->route('goals.index');
  } catch (Exception $exception) {
             Session::flash('danger', 'Goal creation failed!');
        return redirect()->route('goals.index');
  }
}

and view

 <form  action="{{route('goals.store')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
   {{csrf_field()}}

   
   <div class="card-body">
    <div class="form-body">
    <div class="row">
           
      <div class="col-12 col-sm-6">
        <div class="form-group">
          <label class="control-label"> Goal Title:<span style="color:red;">*</span></label>
          <input  type="text" name="goal_title" placeholder="Enter goal title here" class="form-control">
        </div>
      </div>
        

      <div class="col-12 col-sm-6">
        <div class="form-group">
          <label class="control-label"> Max Score<span style="color:red;">*</span></label>
          <input  type="number" name="max_score" placeholder="Enter max. score here" class="form-control" max="120">
        </div>
      </div>  

      <div class="col-12 col-sm-6">
        <div class="form-group">
          <label class="control-label"> Total Weighted Score:<span style="color:red;">*</span></label>
          <input  type="number" name="total_weighted_score" placeholder="Enter total weighted score here" class="form-control" max="120">
        </div>
      </div>  

      <div class="col-12 col-sm-6">
        <div class="form-group">
          <label class="control-label"> Weight(%):<span style="color:red;">*</span></label>
          <input  type="number" name="weighted_score" placeholder="Enter weighted score here" class="form-control" max="120">
        </div>
      </div>  

   </div>
 </div>
</div>          
<!-- /.card-body -->
<div class="card-footer">
  <button type="submit" class="btn btn-primary">{{ trans('global.save') }}</button>
</div>           
   

What I want to achieve is that, on keyup, when the user is typing into weighted_score, the application should sum the value in weighted_score with total_weighted_score.

If the sum is greater than max_score, then there should be a customized error message to indicate this and operation should be stopped.

How do I use jQuery or any method to achieve this?

Thank you