dynamic jqxWalidator

[atomicParticipant]

Hi guys,
I am trying to make fully dynamic forms (multiple forms on same page). I would like to render html in for each loop and to add jqxWalidator on that form with on validation success event.
Number of input elements is variable as well as submit buttons.

Thanks

[MartinParticipant]

Hello atomic,

Could you clarify what is the issue with achieving this?
You should add the jqxValidator to a form, once the form is created.
Can you send us an example of what you are doing?

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[atomicParticipant]

Hi Martin,
Thanks for reply.
I managed to dynamically added validators and jqx events. My form is dynamic and very big (more then 100 input fields and are different for different case).
For anyone who needs something similar:
There are three function createDataEntryBoxDetail, createDataEntryBoxGroup, createDataEntryBox that creates HTML dynamically.
then I create for dynamically created inputs validation rules, event on validation success and at the end save function..

                $.each( genData['general']['reactors'], function( id, reactor ) {
                    reactorType = reactor['type'];
                    reactorName = reactor['name']
                    let reactorVar = reactorName.replace(/\s/g, "");
                    //createDataEntryBoxdynamicaly creates HTML
                    createDataEntryBox(reactorName, reactorVar, reactorType, flag);
                    flag = 'collapsed';
                    let flagDetails = '';
                    $.each( iGroups, function( gid, group ) {
                        //createDataEntryBoxGroup dynamicaly creates HTML
                        createDataEntryBoxGroup(reactorName, reactorVar, reactorType, group['nameID'], group['name'], flagDetails);
                        flagDetails = 'collapsed';
                        rule[reactorVar+'_'+group['nameID']] = [];
                            $.each( bVars, function( bid, object ) {
                            if( (object[reactorName] != 'null' && !isNaN(object[reactorName])) && object['gid'] == group['nameID'] ){
                                //createDataEntryBoxDetail creates HTML
                                createDataEntryBoxDetail(reactorName,reactorVar, group['nameID'], object);
                                $("#id_"+reactorVar+"_"+object['var']).val(object[reactorName]);
                                rule[reactorVar+'_'+group['nameID']].push(
                                        { input: "#id_"+reactorVar+"_"+object['var'], message: object['var']+" is required!", action: "keyup", rule: "required" },
                                        { input: "#id_"+reactorVar+"_"+object['var'], message: object['var']+" is not number!", action: 'keyup', rule: function () {
                                            var value = $("#id_"+reactorVar+"_"+object['var']).val();
                                            var result = !isNaN(value);
                                            return result;
                                            }
                                        }
                                    
                                );
                            }                            
                        });
                        $('#form_'+reactorVar+'_'+group['nameID']).change(function(){
                            $("#msgDetail_"+reactorVar+'_'+group['nameID']).text("Input has been changed. Please save changes.").removeClass("jqx-validator-success-label").addClass("jqx-validator-info-label").show();
                            $("#msgParent_"+reactorVar).text("Data not saved!.").removeClass("jqx-validator-success-label").addClass("jqx-validator-warning-label").show();
                        });
                        $('#form_'+reactorVar+'_'+group['nameID']).jqxValidator({ hintType: 'label', rules: rule[reactorVar+'_'+group['nameID']] }); 

                        $("#"+reactorVar+'_'+group['nameID']).on('click', function (event) {
                            reac = $(this).attr('reactor-data');
                            $('#form_'+reactorVar+'_'+group['nameID']).jqxValidator('validate');
                        })

                        $('#form_'+reactorVar+'_'+group['nameID']).on('validationSuccess', function (event) {
                            values = $( '#form_'+reactorVar+'_'+group['nameID'] ).serializeArray();
                            let data = [];
                            $.each( values, function( id, object ) {
                                let chunk = {};
                                let name = object['name'];
                                let value = object['value']
                                let res = name.split("_");
                                let uid = res[0];
                                let varName = res[1];
                                chunk['reactor'] = reac;
                                chunk['id'] = uid;
                                chunk['var'] = varName;
                                chunk['value'] = value;
                                data.push(chunk);
                            });
                            saveBasic(JSON.stringify(data))
                                .then(responseData => {
                                    switch (responseData["type"]) {
                                        case 'ERROR':
                                            ShowErrorMessage(responseData["msg"]);
                                        break;
                                        case 'SUCCESS':
                                            ShowSuccessMessage(responseData["msg"]);
                                            console.log(reactorVar+'_'+group['nameID']);
                                            $("#msgDetail_"+reactorVar+'_'+group['nameID']).html("Data have been saved.").removeClass("jqx-validator-info-label").addClass("jqx-validator-success-label").show();
                                            $("#msgParent_"+reactorVar).html("").removeClass("jqx-validator-warning-label").addClass("jqx-validator-success-label").show();
                                        break;
                                    }
                                })
                                .catch(error => {
                                    let responseData = error;
                                    ShowErrorMessage(responseData);
                                });
                        })
                    });
                });

Thanks Martin anyway

[MartinParticipant]

Hello atomic,

Thank you for the update!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts