如何动态添加和删除要由Parsley.js验证的表单字段？ [英] How can I dynamically add and remove form fields to be validated by Parsley.js?

问题描述

我有一个表单（'#registrations'），我正在使用Parsley.js进行验证，到目前为止它工作正常。但是，我试图动态删除表单字段，并添加新的Parsley验证，具体取决于某人在选择下拉列表中选择什么（'#manufacturer'）。

这是我的标记：

 < select name =manufacturerid =manufacturerparsley-required =truedata -error-message =请选择制造商。> 
 
< option value =apple> Apple< / option> 
 
< option value =blackberry> Blackberry< / option> 
 
< option value =htc> HTC< / option> 
 
< option value =huawei>华为< / option> 
 
< option value =lg> LG< / option> 
 
< option value =motorola> Motorola< / option> 
 
< option value =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（）{
 
 //定义所选值
 var manufacturer = $（this）.val（） ; 
 
 //破坏parsley 
 $（'＃registrations'）。parsley（'destroy'）; 
 
 //删除所有模型从parsley验证中选择
 //如果有人以前选择过不同的制造商
 $（'＃registrations'）。parsley（'removeItem'，'＃apple-models'）; 
 $（'＃registrations'） .parsley（'removeItem'，'＃blackberry-models'）; 
 $（'＃registrations'）。parsley（'removeItem'，'＃htc-models'）; 
 $（'＃registration '）.parsley（'removeItem'，'＃huawei-models'）; 
 $（'＃registrations'）。parsley（'removeItem'，'＃lg-models'）; 
 $（' ＃注册）; parsley（'removeItem'，'＃motorola-models'）; 
 $（'＃registration）'parsley（'removeItem'，'＃nokia-models'）; 
 $（'＃注册'）。parsley（'removeItem'，'＃samsung-models'）; 
 $（'＃registrations'）。 
 $（'＃registrations'）。parsley（'removeItem'，'＃sony-ericsson-models'）; 
 
 //添加相应的模型select to parsely 
 $（'＃registrations'）。parsley（'addItem'，'＃'+ manufacturer +' -  models'）; 
 
 // reinit parsley 
 $（'＃registrations'）。parsley（）; 
 
}）; 
  

这不工作，但我不知道为什么。

解决方案

一旦新的字段添加到欧芹，您需要在该字段中添加所需的约束。

添加相应的模型选择parsely
$（'＃registrations'）。parsley（'addItem'，'＃'+ 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将根据每个输入的数据属性自动检测您的表单中的更改。在上面的例子中，如果你想添加一个新的项目给Parsley，你可以执行以下操作：

  // destroy parsley 
 $（'form'）。parsley（）。destroy（）; 
 
 //将输入的必需属性设置为true 
 $（'input'）。attr（'data-parsley-required'，'true'）; 
 
 // reitialize parsley 
 $（'form'）。parsley（）; 
  

同样，如果你想从欧芹中删除一个项目，你可以这样做：

  // destroy parsley 
 $（'form'）。parsley（）。 
 
 //将必需属性设置为false 
 $（'input'）。attr（'data-parsley-required'，'false'）; 
 
 // reitialize parsley 
 $（'form'）。parsley（）; 
  

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').

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:

//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.

解决方案

Once the new field has been added to Parsley, you need to add the required constraint to that field.

//add corresponding models select to parsely
$('#registrations').parsley('addItem', '#'+manufacturer+'-models');

//add required constraint 
$('#'+manufacturer+'-models').parsley('addConstraint', {
    required: true 
});

Update (April 10, 2014)

The above works for Parsley.js 1.x but not for Parsley 2.x.

Parsley 2.x doesn't use addItem, removeItem, addConstraint, or 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:

//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:

//destroy parsley
$('form').parsley().destroy();

//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');

//reinitialize parsley
$('form').parsley();

这篇关于如何动态添加和删除要由Parsley.js验证的表单字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！