使用 Parsley.js 将验证器添加到动态克隆的字段时出现两个错误

Question

我有一个表格，我正在使用 Parsley.js 进行验证。一切都像一个魅力。除此之外，还有一部分表单允许用户添加新字段：

addFieldsToContainer = function($fields, $container) {
    $fields.clone(true).removeClass('empty-form').appendTo($container);

    if (typeof(Parsley) !== 'undefined'){
        $('form.form-horizontal').parsley().destroy();
        addValidatorsListeners();
    }
};

我的验证有点复杂，因为有部分，在每个部分中，输入必须全部加起来是一个总数，这是另一个输入的值。我已经将输入触发到 blur，如果输入了任何输入并且该部分的总数是错误的，则该部分的所有输入都会被赋予 parsley-error class ，反之亦然。现在，在添加到 DOM 的新输入上，欧芹 ui 不起作用，即 parsley-success/error classes 没有被添加到它.但是该部分的其余部分仍然可以正常工作，甚至包括总计算中输入中的任何数字。我还在开发控制台中看到了这两个错误：

Uncaught TypeError: Cannot set property 'validatedOnce' of undefined parsley.min.js:8 
Uncaught TypeError: Cannot read property '$errorsWrapper' of undefined

我的代码here.

如何正确地将这些新输入绑定到欧芹验证器？

编辑：所以我刚刚意识到，当用户单击添加输入按钮时，所有具有 parsley:success/error class 的输入都已全部删除（因为我假设是 model_form.parsley().destroy()？）except 用于已添加的新输入。正如我所指出的，此输入 class 永远不会随着本节的其余部分而改变。此外，总注册输入没有改变，我猜是因为 { excluded: '[data-parsley-sum-total="all"]' } 行。所以看起来从页面克隆的输入没有被绑定销毁或者它的验证器被正确添加，所以某种事件处理问题？

Maybe related?

Answer 1

如果你用它们的数据克隆 Parsley 的元素，是的，Parsley 会被搞得一团糟。

我只是建议不要这样做。更准确地说，在没有数据和事件的情况下进行克隆，或者在与 parlsey 绑定之前进行克隆。

如果你真的必须走这条路，如果你$yourClone.removeData('Parsley')，你可能可以在之后进行克隆。我还没有测试过，也不能保证即使它现在能用，将来也会用。

使用 Parsley.js 将验证器添加到动态克隆的字段时出现两个错误

Getting two errors using Parsley.js to add validators to fields that are dynamically cloned

javascript

parsley.js