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

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

    });

这不工作,但我不知道为什么.

解决方法

一旦将新的字段添加到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,但不适用于欧芹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();