Dynamically add and remove form fields to be validated by Parsley.js

How can I dynamically add and remove form fields to be validated by Parsley.js?

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:

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

 

 

Credit to https://stackoverflow.com/questions/21867162/how-can-i-dynamically-add-and-remove-form-fields-to-be-validated-by-parsley-js

Change parsley error container position

Change the container with DOM attributes

In cases where you only have one input (or group of inputs, like you do) and you want to change the container of the errors on those inputs, you can use data-parsley-errors-container="#element"

<fieldset>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
    </label>

    <div id="checkbox-errors"></div>
</fieldset>

Credit to: https://stackoverflow.com/questions/21702476/parsley-js-change-error-container

Parsley Js

1. Change parsley error container position
2. Dynamically add and remove form fields to be validated by Parsley.js