Question

我在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>

Answer 1

如果要向表单动态添加输入，则应使用rules。确保您在表单上调用validate（）（您在代码中缺少id =“myForm”的表单标记）。另外，我添加了一些“改进”。 Check out the 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);
    });
});

创建动态组以进行验证

1 个答案: