动态输入数组元素的JQuery验证 [英] JQuery Validation of Dynamic Input Array Elements

问题描述

我有一个表格，用户可以在其中添加他打算购买/出售的物品.我拥有的相应验证规则如下:

I have a form where a user can add the items he intends to buy/sell. The corresponding validation rules that I have is as follows:

rules: {
                'items[][name]': {
                    required: true
                },
                'items[][description]': {
                    required: true
                },
                'items[][rate]': {
                    required: true,
                    number: true
                },
                'items[][quantity]': {
                    required: true,
                    number: true
                }
        }
errorPlacement: function (error, element) {
                error.appendTo('#' + element.attr('id') + '_error');
            }

现在，用户还可以向表单添加新项目.为此，我克隆了第一行并将其附加到最后一行.相应的代码如下:

Now, user also has the ability to add new items to the form. For that, I clone the first row and append it to the last. The corresponding code is as follows:

var $clone = original.clone().removeAttr('id'); // original is the initial first row of items
                    $clone.find(':text') // get the text inputs
                        .val('') // reset their values
                        .removeClass('error'); // remove the error classes if any    

    /*
    * I have an error span corresponding to each input where I display the errors.
    * Here, i get the input and span elements, split them in two groups, then 
    * add a random seed to each of them to get a unique id to be used by jQuery errorHandler to place the error
    */
                    var $formElements = $clone.find('input:text, span'),
                        $even = $formElements.filter(':even'),
                        $odd = $formElements.filter(':odd');

                    for (var i = 0; i < $even.length; i++) {
                        var idParts = $($even[i]).attr('id').split('__');
                        var seed = Date.now();

                        $($even[i]).attr('id', idParts[0] + seed + '_' + idParts[1]);
                        $($odd[i]).attr('id', idParts[0] + seed + '_' + idParts[1] + '_error');
                    }

我的问题是:

->仅验证静态创建的第一行.

-> Only the first item row, that is created statically, is validated.

我知道jQuery验证程序每个字段都需要一个唯一的名称.但是，在这种情况下，我需要一组项目.无论如何，即使是新创建的项目字段也具有相同的名称，所以不应该自动验证它们吗?

I know jQuery validator needs a unique name for each field. But, in this case, I need an array of items. Anyway, even the newly created item fields have the same name, so should not they be validated automatically?

如果没有，那么通过维护一系列项目可以解决什么问题?

If not, then what is the work around by maintaining an array of items??

谢谢.

推荐答案

那么通过维护一系列项目可以解决什么问题?

then what is the work around by maintaining an array of items?

每个 必须 都具有唯一的name.因此，在创建它们时，就像在id ...

They must each have a unique name. So when you create them, use your index on the name like you're already doing on the id...

item[1], item[2], etc.

另外，在创建它们时，您将使用 .rules('add')方法将规则添加到每个元素

Also when you create them, you would use the .rules('add') method to add the rules to each element.

换句话说，您不能简单地克隆它们并期望一切都能自动运行.

In other words, you cannot simply clone them and expect everything to automatically work.

这篇关于动态输入数组元素的JQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！