jquery - JQuery - on() Keyup Validation 不起作用

Question

在 Laravel-5.8 应用程序中，我使用 JQuery on()keyup 函数来验证一些计算，如下所示：

< script type = "text/javascript" >
  $(document).ready(function() {
    // **Treat like global variable**
    var myRatingLimit, myWeightedScore;

    $('.modal_add_comment').on('show.bs.modal', function(e) {
      var $this = $(e.relatedTarget);
      var data_id = $this.data('id');
      var modal = $this;
      var parentTr = $this.closest('tr');

      // **Reuse the vars instead of re-declaring them**
      myRatingLimit = parentTr.find('.myRatingLimit').text();
      myWeightedScore = parentTr.find('.myWeightedScore').text();

      // directly use .val() instead of .attr()
      var newRating = modal.find('.InputRatingLimit').val(myRatingLimit);
      var newScore = modal.find('.InputWeightedScore').val(myWeightedScore);
      var newScore1 = $(".InputWeightedScore").val();
      var newRating1 = $(".InputRatingLimit").val();
    });

    $(".myRating").on('keyup blur', function(e) {
      var main = myWeightedScore;
      var perc = myRatingLimit;
      main = main ? parseInt(main) : 0;
      perc = perc ? parseInt(perc) : 0;
      let sumWeightBalance = parseInt(main);
      let sumPercBalance = parseInt(perc);
      var percVal = (sumPercBalance / 100).toFixed(2);
      var mult = main * percVal;
      var percResult = main + mult;

      // **You will get NaN error when parsing empty value**
      // **Thus use a empty check and NaN check before**
      const myRating = $(".myRating").val();
      let sumValue = myRating.length === 0 || isNaN(myRating) ? 0 : parseInt(myRating);
      console.log(`sumValue is ${sumValue}`);
      if (sumValue > percResult) {
        Swal('Oops...', 'Self Rating is greater than Rating Limit!', 'error')
        $(".myRating").val('');
        return false;
      }
    });
  }); <
/script>    <
script type = "text/javascript" >
  function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
      e.preventDefault();
    }
  }; <
/script>

<div id="modal_add_comment_{{ $goal->id }}" class="modal fade modal_add_comment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form action="{{route('appraisal.appraisal_year_end_setups.employee_year_end_comment',['id'=>$goal->id])}}" method="post" enctype="multipart/form-data" class="review_comment-form">
        {{ csrf_field() }}
        <div class="modal-header">
          Self-Review Comment
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label class="control-label"> Rating:<span style="color:red;">*</span></label>
            <input type="hidden" name="InputRatingLimit" class="InputRatingLimit">
            <input type="hidden" name="InputWeightedScore" class="InputWeightedScore">
            <input type="text" name="employee_year_end_weighted_score" class="form-control myRating" placeholder="Enter Rating here e.g. 10" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" style="width: 100%;"
              maxlength="4" required/>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close-modal-create" data-dismiss="modal">Cancel
                        </button>
          <button type="submit" id="review_comment_btn-submit" class="btn btn-success btn-ok">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

当模态表单显示时，我希望.myRating使用keyupif (sumValue > percResult) {

但是无论我输入什么class="form-control myRating"，即employee_year_end_weighted_score，在keyup 上console.log(sumValue);都会给出0。

所以验证没有完成。

我该如何解决这个问题？

标签： jquery