trigger not applied to Dynamic Forms

[devmondo]

Hi, awesome library, one of the best i have seen, thanks a lot for it.

i am having an issue, when a form is being injected dynamically to the page the data-trigger="keyup" does not work but parsley validation functionality works fine using this command $( '#form' ).parsley( 'validate' ); then the trigger works, but that defeats the whole purpose of keyup event

thanks in advanced.

[guillaumepotier]

Hi @devmondo,

Here is the explanation: the whole auto-bind stuff with data- api is made on window onload by Parsley here. That means that a dynamically injected form is not auto-binded by Parsley :(

You'll have to bind it "manually" this way, like if it was auto-binded on onload: $('#form').parsley();

It won't trigger any validation, just bind constraints and events. Your keyup events should be fine then ;)

Best

[devmondo]

thanks for the reply,

i have done as you mentioned, but it does not work, still keyup is not triggered, but after submitting the form wither it is valid or not , the trigger works.

[guillaumepotier]

Could you try to add onFieldValidate listener to see exactly if event is not fired on your keyup event.

Also, could you share your code on jsfiddle or jsbin to try myself?

Best

[devmondo]

thanks a lot for the reply, i have tried to add onFieldValidate but nothing works, i want to share the code, but the problem it is complex, and i think the problem is conflict with knockout.js, because i bind the form to knockout observable, and with that, knockout, removes the Form from the DOM completely and then reads it when i fill the observable. so i think there should be a fix if the parsley bind to dynamic forms with maybe jquery On event ?

excuse my shallow knowledge

[devmondo]

Hi Again, i have found the problem, it was Knockout.Js and it is crazy binding logic, so now it works fine, thank you :)

[egidijusz]

Hello, first I also would like to thank you for such a nice library! :)

Second - I can confirm that it does not apply validation on dynamic content. In my case I'm injecting additional fieldsets to an already parsley'ed form. And I'm calling $('#form').parsley() after adding those additional fieldsets. Yet parsley does not do any validation on new parts of the form whatsoever. Not on keyups, not on form submission.

P.s. I'm not using knockout.js as OP.

[guillaumepotier]

Hello @egidijus,

Thanks for your bug report. Effectively there's a problem, because once parlsey have been binded once on form and its fields, it could not bind it again and detect new fields.

I'll think to something to add extra fields on the go, and also the ability to destroy a parsley binding on a form and its items (discussed here #51)

[anilselvaa]

Hi, first I am so much impressed your library... Than Now i have same issue for dynamic elements validating.. I already tried some earliest post commands but i did't solve my issue... how can i try to troubleshoot... code here: var j= 1; $("#major_item_table_row").click(function(){ $("#major_row"+j).after(''); j=j+1; });

[sajjadrad]

HI,Thanks for creating this wonderful library. for handle this problem I destroy parsley first and recreate it.is there any problem with this code?

$('#form').parsley( 'destroy' ) $('#form').parsley()

[guillaumepotier]

Not at all. This is actually the only possible current way to do so.

[smb9]

Hi, Great tool. I am having a problem with rebinding to parsley.js after partial postback. I have tried $('#form').parsley( 'destroy' ) $('#form').parsley() but that does not work. Any suggestions?

[DaZKooL]

Hi, I have 3 forms in a page, 2 hidden, one shown. I bind Parsley and it works correctly. Then I switch language and I load 3 new forms, I bind them but it doesn't work any more...also going back to the previous set of forms, it doesn't work any more. If I don't destroy parsley, then it works correctly everywhere, but it does not accept the customized error classes...any idea how to solve this? This wrapper I use it refers than to parsley v.2.0.0 rc5 thanks, Julius

/**

• @name: dbkParsley
• @desc: Parsley front end library http://parsleyjs.org/ warpper. In main.js it checks for forms with data attribute data-dbk-form and it validates them
• @requires: jQuery */

(function ($, window, document) {

/**
 * Set the defaults one time only
 *
 * @default
 */

var pluginName = "dbkParsley",
    defaults = {};

$.fn[pluginName] = function (onSuccessFunc, onErrorFunc, onSuccessFuncArg, onErrorFuncArg) {

    alert ('Parsley initialized')
    var el = $(this);

    if (el.parsley().length>1){
    for (var i=0;i<el.parsley().length;i++){
        //el.parsley[i]( 'destroy' )
    el.parsley()[i].destroy();
    }
}
else{
    //el.parsley( 'destroy' )
    el.parsley().destroy();
}

    // initiating fallback functions, if passed
    if (onSuccessFunc) {
        el.parsley().subscribe('parsley:field:success', function () {
            onSuccessFunc(onSuccessFuncArg);
        });
    }
    if (onErrorFunc) {
        el.parsley().subscribe('parsley:field:error', function () {
            onErrorFunc(onErrorFuncArg);
        });
    }

    var customizeClasses = function () {
        el.parsley({
            errorsWrapper: '<ul class="dbk-form-error-list"></ul>',
            errorTemplate: '<li class="dbk-form--error"></li>'
        });
    };
    setTimeout(customizeClasses, 0);
};

})(jQuery, window, document);