How can I dynamically add and remove form fields t

Question

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.

Answer 1

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();

Answer 2

I had this issue while working with validates-if-empty set to true. Simply setting this to false didn't have any effect. I had to actually remove the attributes. On validation parley automatically detected the changes.

$('input').removeAttr('data-parsley-required');
$('input').removeAttr('data-parsley-validate-if-empty');