jQuery 如何动态添加和删除要由 Parsley.js 验证的表单字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21867162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I dynamically add and remove form fields to be validated by Parsley.js?
提问by Michael Lynch
I have a form ('#registrations') that I am validating with Parsley.js and so far it is working fine. However, I am trying to dynamically remove form fields and add new ones to Parsley validation, depending on what someone selects in a select drop down ('#manufacturer').
我有一个表单（'#registrations'），我正在使用 Parsley.js 进行验证，到目前为止它工作正常。但是，我正在尝试动态删除表单字段并将新字段添加到 Parsley 验证中，具体取决于某人在选择下拉列表（'#manufacturer'）中选择的内容。
Here is my markup:
这是我的标记：
<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>
Here is my JS:
这是我的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();
});
This isn't working but I don't know why.
这不起作用，但我不知道为什么。
回答by Michael Lynch
Once the new field has been added to Parsley, you need to add the required constraint to that field.
将新字段添加到 Parsley 后，您需要向该字段添加所需的约束。
//add corresponding models select to parsely
$('#registrations').parsley('addItem', '#'+manufacturer+'-models');
//add required constraint
$('#'+manufacturer+'-models').parsley('addConstraint', {
required: true
});
Update (April 10, 2014)
更新（2014 年 4 月 10 日）
The above works for Parsley.js 1.x but not for Parsley 2.x.
以上适用于 Parsley.js 1.x 但不适用于 Parsley 2.x。
Parsley 2.x doesn't use addItem, removeItem, addConstraint, or removeConstraint.
Parsley 2.x 不使用addItem, removeItem, addConstraint, 或removeConstraint。
Instead, Parsley 2.x will automatically detect changes in your form based on the data attributes each input has. In the above example, if you wanted to add a new item to Parsley, you would do the following:
相反，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();
Likewise, if you wanted to remove an item from Parsley, you would do:
同样，如果您想从 Parsley 中删除一个项目，您可以这样做：
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');
//reinitialize parsley
$('form').parsley();
回答by Constant Meiring
I had this issue while working with validates-if-emptyset to true. Simply setting this to falsedidn't have any effect. I had to actually remove the attributes. On validation parley automatically detected the changes.
我在使用validates-if-emptyset to时遇到了这个问题true。简单地将其设置为false没有任何效果。我不得不实际删除这些属性。在验证 parley 自动检测到的变化。
$('input').removeAttr('data-parsley-required');
$('input').removeAttr('data-parsley-validate-if-empty');
回答by Lucha Laura Hardie
Update for 2019, parsley.js version 2.8.1:
2019 年更新， parsley.js 版本 2.8.1：
You do not need to destroy parsley on the form and re-initialize it. Instead, you can just use refresh as follows:
您不需要销毁表单上的欧芹并重新初始化它。相反，您可以按如下方式使用刷新：
$('form').parsley().refresh();
Destroying parsley isn't always desired as this will cause any currently existing validation errors and their messages to disappear.
销毁欧芹并不总是需要的，因为这会导致任何当前存在的验证错误及其消息消失。
You can use the above refresh statement after dynamically adding or removing fields on your form, and parsley will find them.
您可以在表单上动态添加或删除字段后使用上面的刷新语句，欧芹会找到它们。
See the documentation from Parsley in the section titled "Forms" under "Methods": http://parsleyjs.org/doc/index.html#usage-form
请参阅“方法”下标题为“表单”部分中来自 Parsley 的文档：http: //parsleyjs.org/doc/index.html#usage-form
