Parsley.js destroy and revalidate fields already validated

I have implemented parsley on a complicated form that uses on-blur validation.

I have run into an issue where i go through the form, the fields are validated one by one, then based on a dropdown change, I have to destroy the Parlsey object in order to modify the validation and the fields that were valid are no longer valid.

How can I retain the already validated fields.

For example say I have the following:

<input type="text" id="1">
<input type="text" id="2">
<select id="select">
    <option id=1>1</option>
    <option id=2>2</option>
    <option id=3>3</option>
</select>
<input type="text" id="3">
<input type="text" id="4">
<input type="text" id="5">

###Scenario:

• I enter data in ID=1 and ID=2 textboxes, success class is added as I tab out of the textbox.
• I change select box to option 2
• I destroy parsley
• Success class is removed from ID=1 and ID=2 textboxes

Currently I am doing the following:

$("#form").parsley().destroy();
$('#form').parsley({
    successClass: "valid",
    errorClass: "invalid",
    errorsWrapper: '<div></div>',
    errorTemplate: '<p></p>'
}).validate('section');

###What this does

• This revalidates all the fields

###What I am looking for

• I need ID=1 and ID=2 to remain valid after I destroy.

When you call destroy() all things from Parsley are destroyed. This means that all the classes, messages (DOM), objects and events will be destroyed.

If you're looking for a way to maintain the UI aspect, you can do that with a not-so-pretty solution:

1. In your styles, where you have .valid { ...} add another class: .valid, .fake-valid { ... }. Do the same for invalid.
2. Before calling destroy(), navigate through all the fields and check if there is a class valid or invalid
3. If so, apply a class called fake-valid or fake-invalid.
4. Using the event parsley:form:init, loop through the fields again and change their classes from fake-... to the correct classes.

Parsley will validate the fields but the UI is maintained.

Check this JsFiddle.

<style>
    .valid, .fake-valid {
        color: #468847;
        background-color: #DFF0D8;
        border: 1px solid #D6E9C6;
    }

    .invalid, .fake-invalid {
        color: #B94A48;
        background-color: #F2DEDE;
        border: 1px solid #EED3D7;
    }
</style>

<form id="myForm" method="post">
    <input type="text" id="1" data-parsley-trigger="focusout" required />
    <input type="text" id="2" data-parsley-trigger="focusout" required />
    <select id="select">
        <option id=1>1</option>
        <option id=2>2</option>
        <option id=3>3</option>
    </select>
</form>

<script>
    $(document).ready(function() {
        var parsleyOpts = {
            successClass: "valid",
            errorClass: "invalid",
            errorsWrapper: '<div></div>',
            errorTemplate: '<p></p>'
        };

        var ParsleyForm = $("#myForm").parsley(parsleyOpts);

        $("#select").on('change', function() {
            // before destroy, add fake class
            for (var i in ParsleyForm.fields) {
                var elem = ParsleyForm.fields[i].$element;
                if (elem.hasClass('valid'))
                    elem.addClass('fake-valid');
                else if(elem.hasClass('invalid'))
                    elem.addClass('fake-invalid');
            }

            ParsleyForm.destroy();

            ParsleyForm = $("#myForm").parsley(parsleyOpts);
        });

        // when parlsey is initialized, lets see if the fields have fake classes
        // if so, add parsley classes
        $.listen('parsley:form:init', function(formInstance) {
            for (var i in formInstance.fields) {
                var elem = formInstance.fields[i].$element;

                if (elem.hasClass('fake-valid'))
                    elem.toggleClass('fake-valid valid')

                if (elem.hasClass('fake-invalid'))
                    elem.toggleClass('fake-invalid invalid');
            }
        });
    });
</script>