Laravel - Как проверить Laravel ввод текста с помощью ключа jQuery

Question

В моем 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>           

То, чего я хочу достичь, это то, что при keyup, когда пользователь вводит weighted_score, приложение должно суммировать значение в weighted_score с total_weighted_score.

Если сумма больше max_score, то должно быть настроенное сообщение об ошибке, чтобы указать это, и операция должна быть остановлена.

Как использовать jQuery или любой другой метод для достижения этой цели ?

Спасибо

Answer 1

Пожалуйста, попробуйте это -

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

И скрипт ниже -

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

Answer 2

Вы Jquery событие keyup и проверьте, является ли входное значение пустым или черным, затем верните false. Вы можете увидеть пример здесь Не забудьте добавить jquery скрипт.