如何动态添加和删除要由 Parsley.js 验证的表单字段？答案

【问题标题】：How can I dynamically add and remove form fields to be validated by Parsley.js?如何动态添加和删除要由 Parsley.js 验证的表单字段？
【发布时间】：2014-02-18 22:48:38
【问题描述】：

我有一个表单（'#registrations'），我正在使用 Parsley.js 进行验证，到目前为止它运行良好。但是，我正在尝试动态删除表单字段并将新字段添加到 Parsley 验证中，具体取决于某人在选择下拉列表 ('#manufacturer') 中选择的内容。

这是我的标记：

<select name="manufacturer" id="manufacturer" parsley-required="true" data-error-message="Please select a manufacturer.">

    <option value="apple">Apple</option>

    <option value="blackberry">Blackberry</option>

    <option value="htc">HTC</option>

    <option value="huawei">Huawei</option>

    <option value="lg">LG</option>

    <option value="motorola">Motorola</option>

    <option value="nokia">Nokia</option>

    <option value="samsung">Samsung</option>

    <option value="sony">Sony</option>

    <option value="sony-ericsson">Sony Ericsson</option>

</select>

这是我的 JS：

//init parsley
$('#registrations').parsley();

$('#manufacturer').change(function() {

        //define selected value
        var manufacturer = $(this).val();

        //destroy parsley
        $('#registrations').parsley('destroy');

        //remove all models selects from parsley validation
        //if someone has previously selected a different manufacturer
        $('#registrations').parsley('removeItem', '#apple-models');
        $('#registrations').parsley('removeItem', '#blackberry-models');
        $('#registrations').parsley('removeItem', '#htc-models');
        $('#registrations').parsley('removeItem', '#huawei-models');
        $('#registrations').parsley('removeItem', '#lg-models');
        $('#registrations').parsley('removeItem', '#motorola-models');
        $('#registrations').parsley('removeItem', '#nokia-models');
        $('#registrations').parsley('removeItem', '#samsung-models');
        $('#registrations').parsley('removeItem', '#sony-models');
        $('#registrations').parsley('removeItem', '#sony-ericsson-models');

        //add corresponding models select to parsely
        $('#registrations').parsley('addItem', '#'+manufacturer+'-models');

        //reinit parsley
        $('#registrations').parsley();

    });

这不起作用，但我不知道为什么。

【问题讨论】：

添加或删除物品时是否需要销毁并重新初始化欧芹？

标签： jquery validation dynamic parsley.js

【解决方案1】：

将新字段添加到 Parsley 后，您需要向该字段添加所需的约束。

//add corresponding models select to parsely
$('#registrations').parsley('addItem', '#'+manufacturer+'-models');

//add required constraint 
$('#'+manufacturer+'-models').parsley('addConstraint', {
    required: true 
});

更新（2014 年 4 月 10 日）

以上适用于 Parsley.js 1.x，但不适用于 Parsley 2.x。

Parsley 2.x 不使用addItem、removeItem、addConstraint 或removeConstraint。

相反，Parsley 2.x 会根据每个输入的数据属性自动检测表单中的更改。在上面的示例中，如果您想向 Parsley 添加一个新项目，您可以执行以下操作：

//destroy parsley
$('form').parsley().destroy();

//set required attribute on input to true
$('input').attr('data-parsley-required', 'true');

//reinitialize parsley
$('form').parsley();

同样，如果你想从 Parsley 中删除一个项目，你会这样做：

//destroy parsley
$('form').parsley().destroy();

//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');

//reinitialize parsley
$('form').parsley();

【讨论】：

如果我想删除其他类型的验证？
你不能只做一个reset() 而不是销毁并重新初始化吗？ > reset() #2.0 重置此表单及其字段的 UI。
@KrunchMuffin：我没有尝试过，但我怀疑 reset() 只是重置（删除）任何可见的错误消息等，即“UI”，而不是需要验证的内部记录.
$('form').parsley().destroy();未定义，但是 $('form').parsley('destroy');工作中。对我来说属性添加/删除就足够了。无需重新初始化。
不工作。 $('.form').parsley().isValid() 是 false，而表单在删除项目时提交。有什么建议吗？

【解决方案2】：

我在将validates-if-empty 设置为true 时遇到了这个问题。简单地将其设置为false 没有任何效果。我不得不实际删除属性。在验证谈判中自动检测到更改。

$('input').removeAttr('data-parsley-required');
$('input').removeAttr('data-parsley-validate-if-empty');

【讨论】：

【解决方案3】：

2019 年更新，parsley.js 版本 2.8.1：

您不需要破坏表单上的欧芹并重新初始化它。相反，您可以按如下方式使用刷新：

$('form').parsley().refresh();

并不总是需要销毁欧芹，因为这会导致任何当前存在的验证错误及其消息消失。

您可以在表单上动态添加或删除字段后使用上述刷新语句，parsley会找到它们。

在“方法”下标题为“表单”的部分中查看 Parsley 的文档：http://parsleyjs.org/doc/index.html#usage-form

【讨论】：