针对动态字段的jQuery验证答案

【问题标题】：jquery validation against dynamic fields针对动态字段的jQuery验证
【发布时间】：2011-06-17 04:22:51
【问题描述】：

我正在使用 jQuery 的验证插件并希望验证许多动态添加的文本字段，以便根据单独的 total 字段检查它们的总和。

我过去曾编写过自己的验证方法，但只是采用了易于从附加方法.js 文件中重现的基本正则表达式结构的简单方法。

具体来说，jQuery 网站给出了一个使用addMethod() function 做类似事情的简单示例：

jQuery.validator.addMethod("math", function(value, element, params) { 
 return this.optional(element) || value == params[0] + params[1]; 
}, jQuery.format("Please enter the correct value for {0} + {1}"));

params 参数的实现或多或少没有记录。我能够在a seperate stackoverflow thread 中找到如何将内容传递给参数。但是，在该示例中传递给 params 的数组是静态的。我需要传递给参数的数组根据在“运行时”添加的动态添加的行增长和缩小......

我已经上传了一个完全精简的版本onto jsfiddle 供您查看。 请注意，代码在我有问题的地方嵌入了一些 cmets，此外，我删除了删除功能，因为它只会增加混乱并且无助于说明这一点。

那么如何使用 jQuery 验证库来确保动态添加的字段添加到特定的总数？提前谢谢！

【问题讨论】：

嗨@Jordan Arseno，我的工作与此类似，请发布您的答案

标签： jquery validation

【解决方案1】：

这是我的验证器版本。

http://jsfiddle.net/linkabi9/shBxv/

您会注意到，我传递了一个选择器，而不是参数的静态数字。数组中的一个元素是存款字段的选择器。我给每个现有的和新的存款输入一个类，“setamount1”，你可以使用任何你想要的类。您将此验证器设置为的字段将是“总金额”字段。

我还在存款字段中添加了实时“更改”事件。这将在每次更改时运行验证。我必须警告你，这会在整个表单上运行验证，而不仅仅是存款和总计字段。

现在您可以在同一个表单/页面中多次重复使用此验证器类型！

我继续将验证器代码放在下面。另外，验证器初始化的示例。

jQuery.validator.addMethod("depositsSum", function(value, element, params)
{       
    var amnts = 0;
    $(params[0]).each(function() {
        amnts += parseFloat($(this).val());
    });

    return this.optional(element) || amnts == parseFloat(value);
}, jQuery.format("Individual deposits must add up to the total!"));

$("#depositForm").validate({
    rules: {
        fullAmount: {
            depositsSum: [".amountset1"]
        }
    }
});

【讨论】：

这绝对是执行我正在寻找的那种验证的最简洁的方式。我感谢所有响应者付出的时间和精力。谢谢！ 支付 50 美元

【解决方案2】：

因此，首先您需要一种方法来计算所有动态字段的总数。一种方法是用一个类标记所有这些字段。假设我们称它们为“金额”。然后你可以用这个计算它们的总和

var total = 0;
$('#depositForm input.amount').each(function() {
   total += Number($(this).val());
});

现在，您需要将此总值传递给验证方法。由于 javascript 有闭包，您可以执行以下操作

$("#depositForm").validate({
    rules: { 
       fullAmount: {
          depositsSum: function() {
             var total = 0;
             $('input.amount').each(function() {
                total += Number($(this).val());
             });
             return total;
          }
       }
    }
});

这个函数每次都会执行，它的结果就是你的参数值。所以验证函数最终会是

function(value, element, total) {
    return this.optional(element) || value == total;
}

对于问题的第二部分，运行动态字段的验证，有两种方法。要么有一个验证标记类，要么使用 rule("add", ) 和 rule("remove", ) 方法来插入/删除动态字段。这是类方法的示例：让所有经过验证的字段（动态和总计）都有类“checkSum”。那么：

$.validator.addClassRules("checkSum", {
    depositsSum: function() {
        var total = 0;
        $('input.amount').each(function() {
            total += Number($(this).val());
        });
        return total;
    }
});
$("#depositForm").validate();

这是JSFiddle of it all。

当然，您会注意到这并不像您想象的那样有效。对于您的应用程序，您正在寻找的验证类型是由字段更改触发的完整表单验证，而不是字段验证。玩一下，看看我在说什么

【讨论】：

嗨@charisis，感谢您提供的解决方案，我看起来与此类似，但我面临一些问题，我删除/删除计算不起作用的行，如果两者相等，则错误消息不会隐藏.请您检查一下，谢谢，我正在等待解决方案

【解决方案3】：

尝试在你的输入 html 代码中这样使用...

<input id="check" name="check" type="text" class="required math">

一旦你像上面那样动态创建输入标签，它就会按照你的 add 方法进行验证.. 试试看..

【讨论】：

好的，我实际上是在尝试这个......但是，我如何将存款金额数组传递给验证函数？这是最大的障碍。谢谢。

【解决方案4】：

这包括添加和删除具有实时更新价格的行。 [download]

<html>

    <head>

        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">google.load("jquery", "1");</script>
        <script type="text/javascript">

            $(document).ready(
                function() 
                {
                    $('.add-row').click(
                        function()
                        {
                            addRow();
                            return false;
                        }
                    );

                    addRow();
                }
            );


            function addRow()
            {
                var newRow = '<li class="deposit"><input class="price"> <a href="#" class="remove">Remove</a></li>';

                $('.deposits').append(newRow);
                $('.deposit:last .price').select();

                setListeners();
            }

            function removeRow(val)
            {
                $(val).parents('.deposit').remove();

                sumDeposits();
            }

            function setListeners()
            {
                $('.price').each(
                    function()
                    {
                        $(this).keyup(
                            function() 
                            {
                                sumDeposits();
                            }
                        );
                    }
                );

                $('.remove').each(
                    function()
                    {
                        $(this).click(
                            function() 
                            {
                                removeRow(this);
                            }
                        );
                    }
                );
            }


            function sumDeposits()
            {
                var total = 0;

                $('.price').each(
                    function()
                    {
                        total += Number( $(this).val() );
                    }
                );

                $('.total').html(total);
            }

        </script>

    </head>

    <body>

        <h3>Total is <span class="total">N/A</span></h3>

        <p><a href="#" class="add-row">Add</a></p>

        <ul class="deposits"></ul>

    </body>

</html>

【讨论】：