我有一个表格('#registrations'),我正在使用Parsley.js进行验证,到目前为止它工作正常。但是,我正在尝试动态删除表单字段并将新的字段添加到Parsley验证中,具体取决于某人在选择下拉列表中选择的内容('#manureurer')。
这是我的标记:
<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();
});
这不起作用,但我不知道为什么。
答案 0 :(得分:39)
将新字段添加到Parsley后,您需要向该字段添加所需的约束。
//add corresponding models select to parsely
$('#registrations').parsley('addItem', '#'+manufacturer+'-models');
//add required constraint
$('#'+manufacturer+'-models').parsley('addConstraint', {
required: true
});
以上适用于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();
答案 1 :(得分:1)
在将validates-if-empty
设置为true
时,我遇到了此问题。简单地将其设置为false
没有任何效果。我不得不实际删除属性。在验证时,parley会自动检测到更改。
$('input').removeAttr('data-parsley-required');
$('input').removeAttr('data-parsley-validate-if-empty');
答案 2 :(得分:0)
2019年更新,parsley.js版本2.8.1:
您不需要销毁表单上的欧芹并重新对其进行初始化。相反,您可以按照以下方式使用刷新:
$('form').parsley().refresh();
销毁欧芹并非总是需要的,因为这会导致当前存在的任何验证错误,并且其消息也会消失。
您可以在窗体上动态添加或删除字段之后使用上面的刷新语句,欧芹将找到它们。
请参阅Parsley中“方法”下标题为“表单”的部分中的文档:http://parsleyjs.org/doc/index.html#usage-form