Jquery 如何动态添加和删除要由Parsley.js验证的表单字段?
我有一个“注册”表格,我正在用Parsley.js验证,到目前为止它运行良好。然而,我正在尝试动态删除表单字段并向欧芹验证中添加新字段,这取决于有人在选择下拉列表“制造商”中选择的内容 这是我的标记:Jquery 如何动态添加和删除要由Parsley.js验证的表单字段?,jquery,validation,dynamic,parsley.js,Jquery,Validation,Dynamic,Parsley.js,我有一个“注册”表格,我正在用Parsley.js验证,到目前为止它运行良好。然而,我正在尝试动态删除表单字段并向欧芹验证中添加新字段,这取决于有人在选择下拉列表“制造商”中选择的内容 这是我的标记: <select name="manufacturer" id="manufacturer" parsley-required="true" data-error-message="Please select a manufacturer."> <option value
<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>
这不起作用,但我不知道为什么。将新字段添加到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将根据每个输入的数据属性自动检测表单中的更改。在上面的示例中,如果要向欧芹添加新项目,请执行以下操作:
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to true
$('input').attr('data-parsley-required', 'true');
//reinitialize parsley
$('form').parsley();
同样,如果您想从欧芹中删除一项,您可以执行以下操作:
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');
//reinitialize parsley
$('form').parsley();
我在使用validates if empty设置为true时遇到了这个问题。简单地将其设置为false没有任何效果。我必须删除这些属性。验证时,parley自动检测到更改
$('input').removeAttr('data-parsley-required');
$('input').removeAttr('data-parsley-validate-if-empty');
2019年更新,parsley.js版本2.8.1: 您不需要销毁表单上的欧芹并重新初始化它。相反,您可以按如下方式使用刷新:
$('form').parsley().refresh();
销毁欧芹并不总是可取的,因为这将导致任何当前存在的验证错误及其消息消失
在表单上动态添加或删除字段后,可以使用上面的refresh语句,欧芹会找到它们
请参阅“方法”下标题为“表单”的部分中的欧芹文档:添加或删除项目时是否有必要销毁和重新初始化欧芹?如果我想删除其他类型的验证,是否可以只执行重置而不是销毁和重新初始化?>重置2.0此表单及其字段的重置UI。@KrunchMuffin:我没有尝试过,但我怀疑重置只是重置删除任何可见的错误消息等。即,UI,而不是需要验证的内部记录。$'form'.parsley.destroy;未定义,但$'form'。欧芹'destroy';他正在工作。对我来说,添加/删除属性就足够了。无需重新初始化。不工作。$'。表单“.parsley.isValid在移除项目时提交表单时为false。有什么建议吗?
$('form').parsley().refresh();