键入时，jQuery使用Mod％规则计算并验证输入字段的总数

Question

嗨，请帮忙，我正在尝试验证接受以下0 mod（％）的输入字段：

inputValue % 10 == 0;
inputValue % 20 == 0;
inputValue % 50 == 0;
inputValue % 100 == 0;
inputValue % 200 == 0;

上面的输入不是必需的，但它们至少应是一个输入数据。

总数：
1）如果输入的每个字段的值都不为0 @Mod，则应自动计算并在Tab或KeyUp上显示错误。

此字段需要由R 10，R 20，R 50，R 100，R 200中的数量的触发数据自动填充

这是下面的表格：

$(document).ready(function () {
    //ar r10 = $("#r10_amount").val();

    $("#r10_amount,#r20_amount,#r50_amount,#r100_amount,#r200_amount").each(function () {

        $("input").keydown(function (e) {
            if (e.which == 9) {
                //alert($(this).attr('id'));
                var currid = $(this).attr('id');
                if (currid == "r10_amount" && (((this.value) % 10 == 0))) {
                    $('#r10_err').hide();
                    calculateSum();
                    //alert('inside');
                } else if (e.which == 9 && !isNaN(((this.value) % 10 == 0))){
                    $('#r10_err').show();
                    }

                if (currid == "r20_amount" && ((this.value) % 20 == 0)) {
                    $('#r20_err').hide();
                    calculateSum();
                }
                else if (e.which == 9 && !isNaN((this.value) % 20 == 0)) {
                    $('#r20_err').show();
                }
                //calculateSum();
            }
        //$(this).keyup(function () {

        //    alert($(this).attr('id')); 
        //    var currid = $(this).attr('id');
        //    if (((this.value) % 10 == 0) && currid=="r10_amount") {
        //        $("#r10_err").hide();
        //        calculateSum();
        //        $(this).focus(false);
        //    } else {
        //        $("#r10_err").show();
        //    }
        //    if (((this.value) % 20 == 0) && currid == "r20_amount") {
        //        $("#r10_err").hide();
        //        $("#r20_err").hide();
        //        calculatesum();
        //    } else {
        //        $("#r20_err").show();
        //    }
        //});
    });

});


});

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $("#r10_amount,#r20_amount,#r50_amount,#r100_amount,#r200_amount").each(function () {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#total").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <fieldset>
        <legend>2. Capture Notes:</legend>
        <div class="col-md-3"></div>
        <div class="col-md-4">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R10</span>
                    <input class="form-control amnt" type="text" name="r10" id="r10_amount" placeholder="R0" />
                    <span class="input-group-addon" style="color:red;display:none;" id="r10_err">Invalid Amount</span>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R20</span>
                    <input class="form-control amnt" type="text" name="r20" id="r20_amount" placeholder="R0" />
                    <span class="input-group-addon" style="color:red;display:none;" id="r20_err">Invalid Amount</span>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R50</span>
                    <input class="form-control amnt" type="text" name="r50" id="r50_amount" placeholder="R0" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R100</span>
                    <input class="form-control amnt" type="text" name="r100" id="r100_amount" placeholder="R0" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R200</span>
                    <input class="form-control amnt" type="text" name="r200" id="r200_amount" placeholder="R0" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>Total</span>
                    <span class="input-group-addon" id="total"><i class=""></i>0</span>

                </div>
            </div>
            <div class="form-group">
                <div class="row pull-right">
                    <button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-send"></i>&nbsp;&nbsp;SUBMIT</button>
                </div>
            </div>
        </div>
        <div class="col-md-5"></div>
    </fieldset>
</form>

Answer 1

我在每个data中添加了一个属性input，该属性具有应使用的模数（例如10、20、50等）

然后我在输入中添加了一个keyup侦听器，以检查输入的值。 每次键入时，它都会在另一个函数中计算总数。

检查以下代码：

$(".amnt").on("keyup", function(){
  let mod = parseInt($(this).data("mod"));
  let val = parseInt(this.value);
  
  if (this.value.trim().length < 1){
    this.className = "form-control amnt";       
  } else if (val % mod != 0){
    $(this).removeClass("correct")
    $(this).addClass("error");    
  } else{
    $(this).removeClass("error")
    $(this).addClass("correct");
  }
  
  
  CalculateTotal();
})

function CalculateTotal(){
  var total = 0;
  $(".amnt").each(function(){
    if ($(this).hasClass("correct")){
      total += parseInt(this.value);
    }
  })
  $("#total").text(total)
}

.error{
  border: 2px solid red;
}

.correct{
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <fieldset>
        <legend>2. Capture Notes:</legend>
        <div class="col-md-3"></div>
        <div class="col-md-4">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R10</span>
                    <input class="form-control amnt" type="text" data-mod="10" id="r10_amount" placeholder="R0" />
                    <span class="input-group-addon" style="color:red;display:none;" id="r10_err">Invalid Amount</span>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R20</span>
                    <input class="form-control amnt" type="text" data-mod="20" id="r20_amount" placeholder="R0" />
                    <span class="input-group-addon" style="color:red;display:none;" id="r20_err">Invalid Amount</span>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R50</span>
                    <input class="form-control amnt" type="text" data-mod="50" id="r50_amount" placeholder="R0" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R100</span>
                    <input class="form-control amnt" type="text" data-mod="100" id="r100_amount" placeholder="R0" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>R200</span>
                    <input class="form-control amnt" type="text" data-mod="200" id="r200_amount" placeholder="R0" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class=""></i>Total</span>
                    <span class="input-group-addon" id="total"><i class=""></i>0</span>

                </div>
            </div>
            <div class="form-group">
                <div class="row pull-right">
                    <button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-send"></i>&nbsp;&nbsp;SUBMIT</button>
                </div>
            </div>
        </div>
        <div class="col-md-5"></div>
    </fieldset>
</form>