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.

Is it necessary to destroy and reinitialize parsley when adding or removing items? — Michael Lynch, Feb 28 '14 at 16:58

Michael Lynch · Accepted Answer · 2014-04-10T17:56:39.653

46

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

edited Apr 10 '14 at 17:56

answered Feb 19 '14 at 15:46

Michael Lynch

2,682
3
31
59

1

and if I want to remove other types of validations? – a77icu5 Aug 06 '14 at 17:26
2

can't you just do a `reset()` instead of destroy and reinit? > reset() #2.0 Reset UI for this form and for its fields. – dbinott Sep 30 '14 at 19:49
1

@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. – Phil Gyford Dec 18 '14 at 16:00
$('form').parsley().destroy(); undefined, but $('form').parsley('destroy'); is working. for me attribute addition/removal is enough. no need of reinitialization. – Rashi Feb 14 '15 at 10:16
@PhilGyford Just tried it, you are %100 correct in your suspicion. – Karl Glaser Apr 28 '15 at 11:54
2

not working. ``$('.form').parsley().isValid()`` is ``false`` while form submit when the item is removed . any suggestions? – Binny May 27 '15 at 15:44
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 `` will still result in parsley requiring the field. You need to remove the required attribute so it looks like ``, then the constraints will work as expected. – lps Oct 28 '15 at 22:19
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. – geedubb Jan 20 '16 at 13:57
This reply saves my time. It's working when i followed last script. Thanks buddy.. – Ibnul Quayum Jan 26 '22 at 10:33

score 2 · Answer 2 · edited Jun 04 '15 at 20:34

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

edited Jun 04 '15 at 20:34

Luís Cruz

14,780
16
68
100

answered Jan 15 '15 at 16:33

Constant Meiring

3,285
3
40
52

score 2 · Answer 3 · answered Mar 07 '19 at 19:15

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

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

3 Answers3

Update (April 10, 2014)

Linked