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

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.

Rebak

Is it necessary to destroy and reinitialize parsley when adding or removing items? – Rebak

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

Rebak

and if I want to remove other types of validations? – Judoka

can't you just do a reset() instead of destroy and reinit? > reset() #2.0 Reset UI for this form and for its fields. – Bonhomie

@KrunchMuffin: I haven't tried it, but I suspect reset() simply resets (removes) any visible error messages etc. ie, the "UI", rather than internal record of what requires validation. – Piraeus

$('form').parsley().destroy(); undefined, but $('form').parsley('destroy'); is working. for me attribute addition/removal is enough. no need of reinitialization. – Jen

@PhilGyford Just tried it, you are %100 correct in your suspicion. – Carmelo

not working. $('.form').parsley().isValid() is false while form submit when the item is removed . any suggestions? – Fullerton

In case someone runs into this - on parsley 1.x it will ignore the constraints if you specify "required" statically as an element attribute. Example: removing the required constraint via parsley on this field <input id="a" required> will still result in parsley requiring the field. You need to remove the required attribute so it looks like <input id="a">, then the constraints will work as expected. – Cramp

With V2 you don't need to destroy and then init again. $('input').attr('data-parsley-required', 'true'); will enable. $('input').attr('data-parsley-required', 'false'); will disable. – Complaint

This reply saves my time. It's working when i followed last script. Thanks buddy.. – Neslund

Answer 2

Update for 2019, parsley.js version 2.8.1:

You do not need to destroy parsley on the form and re-initialize it. Instead, you can just use refresh as follows:

$('form').parsley().refresh();

Destroying parsley isn't always desired as this will cause any currently existing validation errors and their messages to disappear.

You can use the above refresh statement after dynamically adding or removing fields on your form, and parsley will find them.

See the documentation from Parsley in the section titled "Forms" under "Methods": http://parsleyjs.org/doc/index.html#usage-form

Resigned

Answer 3

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

Diopside