jQuery验证动态百分比字段

Question

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

百分比行是动态网格的一部分，数量非常多。您将在下面看到我一直在处理的示例。我发现 addMethod 是为每个 input.percent 而不是一次调用的。我还想说它在 submit 被调用之前被调用。

代码。

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 时，不会清除 keyup 上的所有百分比错误。

$("#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%")
);

Answer 1

不要使用 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;
    }