3

我是 jquery 验证的新手，我需要你在一个简单的主题上的帮助。

我正在验证一个动态表。该表有一个添加行的按钮。其中一个字段是百分比，我正在验证所有行的百分比总和是否为 100%。但是，我不能将错误消息或任何无效类附加到百分比字段。我阅读了有关组的信息，但我无法管理我如何才能成为“动态”组，因为我不知道那里有多少行。行字段的名称类似于 Percentage[0]、Percentage[1] 和由 .NET MVC3 生成的 id。

拜托，你能帮我解决这个问题吗？我确定我会在某处跳过任何有用的信息......有人能把我放在正确的位置吗？

提前非常感谢。

问候。

编辑：

当然，我很抱歉。这是我的代码：

目前，我正在使用类验证来获取我想要的所有字段，但是现在，我无法在 div 中显示错误。我只想显示一个错误，但一次验证所有百分比字段。

    <script type="text/javascript">

$.validator.addMethod("checksum", function (value, element, params) {
    var sum = 0;
    $(params.elements).each(function (i, e) {
        sum = sum + parseInt($(e).val());
    });

    return sum == params.total;
}, $.format("The percentage fields must equal {1} "));

$.validator.addClassRules({ totalize: { checksum: { elements: ".totalize", total: 100}} });

$("#myform").validate({ errorPlacement: function (error, element) { 
    if (element.hasClass("totalize")) {
        error.appendTo("#errors") 
    } else {
        error.insertAfter(element);
    }
});

$(function () {

    var $clone = $('<tr><td><input type="text" value="" name="Person[].Name"></td><td><input type="text" value="" name="Person[].Percentage" class="totalize"></td></tr>');

    $("#AddPerson").on("click", function () {
        $clone.clone().appendTo("#people");
    });
});

</script>

<div class="percentages">

    <table class="">
        <caption>
            Percentages
        </caption>
        <thead>
            <tr>
                <th>
                    Name
                </th>

                <th>
                    <button id="AddPerson" type="button">Add</button>
                </th>
            </tr>
        </thead>
        <tbody id="people">
            <tr>
                <td>
                    <input type="text" value="" name="Person[].Name">
                </td>
                <td>
                    <input type="text" value="" name="Person[].Percentage" class="totalize">
                </td>   
            </tr>
        </tbody>
    </table>

    <div id="errors"> 
    </div>

</div>
4

1 回答 1

1

如果您要向表单动态添加输入，则应该使用规则。确保您在表单上调用了 validate()（您的代码中缺少 id="myForm" 的表单标签）。此外，我还添加了一些“改进”。 查看 jsFiddle。或查看以下代码：

/*I used an array instead of object literal in order to format your message.  The object literal hasn't working */
$.validator.addMethod("checksum", function (value, element, params) {
    var sum = 0;
    $(params[0]).each(function (i, e) {
        ///specify radix 10 and use || incase the value is empty
        sum += parseInt($(e).val(), 10) || 0;
    });
    return sum == params[1];
}, $.validator.format("The percentage fields must equal {1}"));
var totalize = {
    checksum: [".totalize", 100]
};
$.validator.addClassRules("totalize", totalize);
var valSettings = {
    onkeyup: true,
    errorPlacement: function (error, element) {
        if (element.hasClass("totalize")) {
            error.appendTo("#errors");
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function (form) {
        form.submit();
    }
};


$(function () {

    $("#myForm").validate(valSettings);
    var $clone = $('<tr><td><input type="text" value="" name="Person[].Name"></td><td><input type="text" value="" name="Person[].Percentage" class="checksum totalize"></td></tr>');

    $("#AddPerson").on("click", function () {
        $clone.clone()
            .appendTo("#people")
            .find("input[name='Person[].Percentage']")
            .rules("add", totalize);
    });
});
于 2013-06-11T14:41:44.227 回答