Laravel-如何使用jQuery使用keyup验证Laravel textinput

在我的Laravel-5.8中，我有一个控制器：

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');
  }
}

和视图

 <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>           

{{csrf_field（）}}
目标名称：*
最高分数*
加权总分：*
重量（%）：*
{{trans（'global.save'）}

我想要实现的是，在keyup上，当用户输入加权评分时，应用程序应该将加权评分中的值与总加权评分相加

如果总和大于max_分数，则应该有一条自定义错误消息来指示此情况，并且应该停止操作

如何使用jQuery或任何方法来实现这一点

---

谢谢

您使用Jquery keyup事件检查输入值是否为空或黑色，然后返回false。 不要忘记添加jquery脚本。

请尝试此操作-

<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" id="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" id="total_weighted_score" placeholder="Enter total weighted score here" class="form-control" max="120" value="0">
        </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" id="weighted_score" placeholder="Enter weighted score here" class="form-control" max="120" onkeyup="checkScore(this.value)">
        </div>
      </div>  

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

{{csrf_field（）}}
目标名称：*
最高分数*
加权总分：*
重量（%）：*
{{trans（'global.save'）}

及以下文字—

<script>
function checkScore(value){
    let max_score = $("#max_score").val();
    let total_weighted_score = $("#total_weighted_score").val();
    let sumValue = parseInt(total_weighted_score) + parseInt(value);

    if (sumValue > max_score) {
      alert("sum value is greater than max score");
      $("#weighted_score").val('');
      return false;
    }
}
<script>

功能检查分数（值）{
设max#u score=$（“#max#u score”）.val（）；
设总加权分数=$（“#总加权分数”）.val（）；
设sumValue=parseInt（总加权分数）+parseInt（值）；
如果（sumValue>max_分数）{
警报（“总和值大于最大分数”）；
美元（“#加权#u分数”）.val（“”）；
返回false；
}
}

Batter要在提交时进行检查，答案最好包含解决问题的代码，如果您发布的链接不可用，则此答案对任何人都没有用处