jQuery验证动态百分比字段

Posted 2021-04-24

我正在使用jQuery validate插件。我正在尝试使用类.percent计算所有输入字段的总和。如果.percent字段的总和不等于100％，则抛出验证错误。

行百分比是动态网格的一部分，并且数量非常多。你会看到我在下面的工作样本。我发现每个input.percent而不是一次调用addMethod。我还想说在调用提交之前调用它。

代码。

html

<div class="row">
    <input value="" class="percent"/>
</div>
<div class="row">
    <input value="" class="percent"/>
</div>

JS

$.validator.addClassRules({
    percent: {percent:true}
});

$.validator.addMethod("percent",
    function cals(value, element) {
        // all the fields that start with 'coeff'
        var percent = element;
        var total = 0;
        for (var i = 0; i < percent.length; i++) {
            total += Number(percent[i].value);
        }
    return  total == 100;
}, $.format("Percentage fields most total up to 100%"));

$("form").validate({

});

更新

我尝试了以下代码并取得了一些成功

$("#modify-funding .percent").rules('add', {sum: 100});

$.validator.addMethod("sum", function (value, element, params) {
        var sumOfVals = 0;

        $("#modify-funding .percent").each(function () {
            sumOfVals = sumOfVals + parseInt($(this).val().length ? $(this).val() : 0);
        });
        if (sumOfVals == params) return true;
        return false;
    },
    $.format("Percentage fields most total up to 100%")
);

将类传递给规则时，它只传递一个元素，这个元素不能让我查询额外的百分比字段。另一个问题是它只将错误类添加到第一个.percent元素，并且一旦满足100％条件，其他元素将不会释放错误。

更新2

这是我最接近验证百分比的工作。它不是非常有效的代码，因为它需要在每次循环规则时遍历所有百分比字段。代码仍然在提交操作发生之前进行验证，并且当百分比已经更正为100时，不会清除密钥上的所有百分比错误。

$("#modify-funding .percent").each(function() {
    $(this).rules('add', {sum: [".percent"]});
})

$.validator.addMethod("sum", function (value, element, params) {
    var sumOfVals = 0;
        $(params[0]).each(function() {
            sumOfVals += parseFloat($(this).val().length ? $(this).val() : 0);
        });

        if (sumOfVals == 100) return true;
        return false;
    },
    $.format("Percentage fields most total up to 100%")
);

答案

不要使用jquery进行这样简单的验证。我真的不明白所有关于jquery的炒作。它只是让你的代码看起来很难看。

    function validate() {
        var ret = false;
        var total = 0;
        var elems = document.getElementsByTagName('*'), i;
        for (i in elems) 
            if (elems[i].className == "percent") 
                total += parseFloat( elems[i].value);
        if (total == 100)
            ret = true;
        return ret;
    }