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

时间:2014-02-18 22:48:38

标签: jquery validation dynamic parsley.js

我有一个表格('#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();

    });

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

3 个答案:

答案 0 :(得分:39)

将新字段添加到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不使用addItemremoveItemaddConstraintremoveConstraint

相反,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