using jqxvalidation , jqxwindow ,jqx tabs all together

[pankhiParticipant]

I am using jqxtabs ,and each tab has form. The issue is i want error icon to come on all tabs if there is any validation error inside any tab on click of a button . But currently error icon is getting displayed only on tab which is currently selected by user. not on unselected tabs, Please help me out.
following is the code i am using:-

$ = jQuery.noConflict();
$(document).ready(function() {
    //===========================
    // show the grid for email Template
    //===========================
    var url = "/ebays/emailtemplatejson"; // action from where we get the result in json
    var source = {
        datatype: "json",
        datafields: [{
            name: 'Subject',
            type: 'string',
            map: 'SystemUserEmailTemplate>Subject'
        }, {
            name: 'Type',
            type: 'string',
            map: 'SystemEmailTemplateType>Type'
        }, {
            name: 'TypeDisplay',
            type: 'string',
            map: 'SystemEmailTemplateType>TypeDisplay'
        }, {
            name: 'PlainTextBody',
            type: 'string',
            map: 'SystemUserEmailTemplate>PlainTextBody'
        }, {
            name: 'UserPlateformId',
            type: 'string',
            map: 'SystemUserEmailTemplate>UserPlateformId'
        }, {
            name: 'TypeId',
            type: 'string',
            map: 'SystemUserEmailTemplate>Type'
        }, {
            name: 'Enable',
            type: 'string',
            map: 'SystemUserEmailTemplate>Enable'
        }, {
            name: 'Explanation',
            type: 'string',
            map: 'SystemUserEmailTemplate>Explanation'
        }, {
            name: 'Bcc',
            type: 'string',
            map: 'SystemUserEmailTemplate>Bcc'
        }],
        updaterow: function(rowid, rowdata, commit) {
            // synchronize with the server - send update command
        },
        id: 'SystemUserEmailTemplate>Id',
        url: url,
        pagesize: 30
    };

    var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties) {
        if (value == "1") {
            return "yes";
        } else if (value == "0") {
            return "No";
        }
    }
    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;

    // initialize jqxGrid
    $("#jqxgrid").jqxGrid({
        width: '100%',
        theme: KiouiTheme,
        height: 350,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        sortable: true,
        altrows: true,
        enabletooltips: true,
        pagesizeoptions: ['10', '20', '30', '40'],
        showfilterrow: true,
        filterable: true,
        showtoolbar: false,
        enablebrowserselection: true,
        selectionmode: 'singlecell',
        // columns shown in grid are mention below
        columns: [{
            text: '',
            datafield: 'Edit',
            columntype: 'number',
            filterable: false,
            sortable: false,
            width: '5%',
            cellsrenderer: function() {
                return '<div style="width: 100%"><img src="/images/edit.png" title="Edit" style=" margin-top: 10%;margin-left: 25%" /></div>';
            }
        }, {
            text: 'Type',
            datafield: 'TypeDisplay',
            width: '35%',
            filtertype: 'checkedlist'
        }, {
            text: 'Subject',
            datafield: 'Subject',
            width: '35%'
        }, {
            text: "User",
            datafield: 'UserPlateformId',
            width: '10%'
        },  {
            text: "Bcc",
            datafield: 'Bcc',
            width: '5%',
			cellsrenderer:cellsrenderer,
        }, {
            text: "Enable",
            datafield: 'Enable',
            width: '5%',
            cellsrenderer: cellsrenderer,
        }, {
            text: '',
            datafield: 'Delete',
            columntype: 'number',
            filterable: false,
            sortable: false,
            width: '5%',
            cellsrenderer: function() {
                return '<div><img src="/images/trash.png"  title="Delete" style="margin-top:10%;margin-left:25%" /></div>';
            }
        }, ]

    });
    //------------------------------------
    // adding validation to the form
    //------------------------------------
    $('#addtemplateForm').jqxValidator({
		
        rules: [{
            input: '#SystemUserEmailTemplateType',
            message: 'Please select a message type.',
            action: 'keyup,blur',
            rule: function(input, commit) {
                var type = $("#SystemUserEmailTemplateType").val();
                if (type != 0) {
                    return true;
                }
                return false;
				}
			}, {
				input: '#SystemUserEmailTemplateSubject',
				message: 'Subject is required!',
				action: 'keyup,blur',
				rule: 'required'
			}]
    });
    $('#edittemplateForm').jqxValidator({
        rules: [{
            input: '#Subject',
            message: 'Subject is required!',
            action: 'blur',
            rule: 'required'
        }]
    });

    // on click of edit and delete
    $("#jqxgrid").on("cellclick", function(event) {
        var column = event.args.column;
        var rowindex = event.args.rowindex;
        var columnindex = event.args.columnindex;

        //when user wants to edit the record
        if (columnindex == 0) {

            // open the popup window when the user clicks a button.
            editrow = rowindex;
            var offset = $("#jqxgrid").offset();
            $("#popupWindow").jqxWindow({
                theme: KiouiTheme,
                position: {
                    x: parseInt(offset.left) + 60,
                    y: parseInt(offset.top) - 20
                }
            });
            // get the clicked row's data and initialize the input fields.
            var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
            $("#Subject").val(dataRecord.Subject);
            $("#Type").val(dataRecord.TypeId);
            $("#Enable").val(dataRecord.Enable);
            $("#WaitForDays").val(dataRecord.WaitForDays);
            $("#Bcc").val(dataRecord.Bcc);

            if (($("#PlainTextBody").val() == "") && (dataRecord.PlainTextBody != "")) { // after page loads
                $("#PlainTextBody").html(dataRecord.PlainTextBody);
            } else {
                $("#PlainTextBody").jqxEditor('val', dataRecord.PlainTextBody);
            }

            // show the popup window.
            $("#popupWindow").jqxWindow('show');

        };
        // if user click want to delete record
        if (columnindex == 5) {
            if (confirm('Are you sure you want to delete this record?')) {

                deleterow = rowindex;
                var rowID = $('#jqxgrid').jqxGrid('getrowid', deleterow); // fetch the deleted id
                var del = "param=delete&Id=" + rowID;
                $.ajax({
                    url: '/ebays/deleteemailtemplateajax',
                    data: del,
                    type: "POST",
                    cache: false,
                    async: false,
                    success: function(response) {
                        var res = response.match(/success/g);
                        if (response.replace(/\s+/, "") == res) {
                            var action = "delete";
                            gridmessage(action); //function called to disaply me
                            $('#jqxgrid').jqxGrid('updatebounddata');
                        }
                    }
                });
            };
        };
    });

    var initGrid = function() {
        // update the edited row when the user clicks the 'Update' button.
        $(".Saverecord").click(function(event) {
            var checkedit = $('#edittemplateForm').jqxValidator('validate'); // adding validation in add form
            if (checkedit == true) {
                showloader(); // to disable button and show loader image
                var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                var row = {
                    Subject: $("#Subject").val(),
                    Type: $("#Type").val(),
                    PlainTextBody: $("#PlainTextBody").val(),
                    UserPlateformId: $("#UserPlateformId").val(),
                    Enable: $("#Enable").val(),
                    WaitForDays: $("#WaitForDays").val(),
                    Bcc: $("#Bcc").val(),
                    Id: rowID,
                };
                // ajax called to UPDATE the row on edit
                $.ajax({
                    url: "/ebays/updateemailtemplateajax",
                    type: "POST",
                    cache: false,
                    async: true,
                    data: row,
                    success: function(response) {
                        var res = response.match(/success/g);
                        if (response.replace(/\s+/, "") == res) {
                            $('#popupWindow').jqxWindow('close');
                            var action = 'edit';
                            showbuttons(); // function created in function.js file to show button enabled and hide loader
                            gridmessage(action);
                            $('#jqxgrid').jqxGrid('updatebounddata');

                        }
                    }
                });
                $("form").submit(function() {
                    return false;
                });

            } else {
                showbuttons();
                event.preventDefault(); //If this method is called, the default action of the event will not be triggered.
            }
        });
    }

    var initWidgetAdd = function(tab) {
        switch (tab) {
            case 0:
                initGridAdd();
                break;
            case 1:
                $("#SystemUserEmailTemplatePlainTextBody").jqxEditor({
                    height: '450px',
                    width: '650px'
                });
                break;
        }

    }
    var initGridAdd = function() {
            //======================================================
            // called ajax to save the data on click of "add template"
            //=======================================================
            $(".addtemplate").click(function(event) {
                event.preventDefault(); //If this method is called, the default action of the event will not be triggered.
                var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form

                if (check === true) {

                    showloader(); // to disable button and show loader image
                    var EmailTemplateType = $('#SystemUserEmailTemplateType').val();
                    var Subject = $('#SystemUserEmailTemplateSubject').val();
                    var PlainTextBody = $('#SystemUserEmailTemplatePlainTextBody').val();
                    var ebayuser = $('#ebayuser').val();
                    var Enable = $('#SystemUserEmailTemplateEnable').val();
                    var WaitForDays = $('#SystemUserEmailTemplateWaitForDays').val();
                    var Bcc = $('#SystemUserEmailTemplateBcc').val();

                    $.ajax({
                        url: "/ebays/addemailtemplateajax",
                        type: "POST",
                        cache: false,
                        async: true,
                        data: {
                            Type: EmailTemplateType,
                            Subject: Subject,
                            PlainTextBody: PlainTextBody,
                            UserPlateformId: ebayuser,
                            Enable: Enable,
                            Bcc: Bcc,
                        },
                        success: function(response) {
                            if ($.trim(response) == "success") {
                                $('#TempForm').jqxWindow('close');
                                var action = 'add';
                                showbuttons(); // function created in function.js file to show button enabled and hide loader
                                gridmessage(action);
                                $('#jqxgrid').jqxGrid('updatebounddata');
                            }
                        }
                    });
                    $("#addtemplateForm").submit(function() {
                        return false;
                    });
                } else {
                    showbuttons();
                    event.preventDefault(); //If this method is called, the default action of the event will not be triggered.
                }
            });
        }
        //---------------------------------
        // widget to show tabs for edit section
        //---------------------------------

    // init widgets to add in different tabs
    var initWidgets = function(tab) {
        switch (tab) {
            case 0:
                initGrid();
                break;
            case 1:
                $("#PlainTextBody").jqxEditor({
                    height: '450px',
                    width: '650px'
                });
                break;
        }
    }
    $('#jqxTabs').jqxTabs({
        width: "750px",
        initTabContent: initWidgets
    }); // adding tabS
    //---------------------------------
    // widget to show tabs for add section
    //---------------------------------

    $('#jqxTabsAdd').jqxTabs({
        width: "750px",
        initTabContent: initWidgetAdd
    }); // adding tabS
    // the Tab Contents will be loaded with Ajax 
    $('#jqxTabsAdd').on('selected', function(event) {
        var pageIndex = event.args.item + 1;

        // if the type is nt selected we will disabled the other tabs.		
        if ($('#SystemUserEmailTemplateType').val() == 0) {
            var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form

            $('#jqxTabsAdd').jqxTabs({
                disabled: true
            }); // disabled tab
        }

        $('#SystemUserEmailTemplateType').on('change', function(event) {

            if ($('#SystemUserEmailTemplateType').val() == 0) {
                var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form

                $('#jqxTabsAdd').jqxTabs({
                    disabled: true
                }); // disabled tab
            } else {
                $('#jqxTabsAdd').jqxTabs({
                    disabled: false
                }); // enabled tab on select of the type
            }

        });

        if (pageIndex == 2) {

            $("#SystemUserEmailTemplatePlainTextBody").jqxEditor({
                height: '450',
                width: '650'
            });
            $.ajax({
                url: "/ebays/prefilledcontentajax",
                type: "POST",
                cache: false,
                async: true,
                data: {
                    Type: $("#SystemUserEmailTemplateType").val(),
                },
                dataType: "json",
                success: function(response) {
                    // response is JSON
                    if (response[0] != undefined) {
                        if (response[0].Subject != undefined) {
                            $("#SystemUserEmailTemplateSubject").val(response[0].Subject);
                        }
                        if (response[0].PlainTextBody != undefined) {
                            $("#SystemUserEmailTemplatePlainTextBody").val(response[0].PlainTextBody);
                        }
                    } else {
                        $("#SystemUserEmailTemplateSubject").val('');
                        $("#SystemUserEmailTemplatePlainTextBody").val('');
                    }
                }
            });
        }

    });

    // show the explanation on elect of the type fro Add form 
    $("#SystemUserEmailTemplateType").change(function() {
        $.ajax({
            url: "/ebays/fetchTypeDetailajax",
            type: "POST",
            cache: false,
            async: true,
            data: {
                Type: $("#SystemUserEmailTemplateType option:selected").val(),
            },
            dataType: "json",
            success: function(response) {
                // response is JSON

                if (response[0] != undefined) {
                    $('.displayExplanation').css('visibility', 'visible');
                    $('.displayExp').html(response[0].Explanation);
                } else {
                    $('.displayExplanation').css('visibility', 'hidden');
                }
            }
        });
    });
    // show the explanation on elect of the type for Edit form 
    $("#Type").change(function() {
        $.ajax({
            url: "/ebays/fetchTypeDetailajax",
            type: "POST",
            cache: false,
            async: true,
            data: {
                Type: $("#Type option:selected").val(),
            },
            dataType: "json",
            success: function(response) {
                // response is JSON

                if (response[0] != undefined) {
                    $('.displayExplanation').css('visibility', 'visible');
                    $('.displayExp').html(response[0].Explanation);
                } else {
                    $('.displayExplanation').css('visibility', 'hidden');
                }
            }
        });
    });

    //=====================================
    // Tooltip code
    //=====================================
    $(".TypeTooltip").jqxTooltip({
        content: '<p align=left>Select the type of message you want to create.<BR>A brief explanation will appear bellow upon selecting one.</p>',
        position: 'mouse',
        name: 'movieTooltip',
        position: 'right',
        autoHideDelay: '30000'
    });
    $(".DaysTooltip").jqxTooltip({
        content: '<p align=left>Number of days to wait after the order has been paid to send this message.</p>',
        position: 'mouse',
        name: 'movieTooltip',
        position: 'right',
        autoHideDelay: '30000'
    });
    $(".UserTooltip").jqxTooltip({
        content: '<p align=left>Makes this template available to the Customers of this Seller Id.</p>',
        position: 'mouse',
        name: 'movieTooltip',
        position: 'right',
        autoHideDelay: '30000'
    });
    $(".htmlTooltip").jqxTooltip({
        content: '<p align=left>The core message send to the Buyer.<BR>This can be plain text or HTML.</p>',
        position: 'mouse',
        name: 'movieTooltip',
        position: 'right',
        autoHideDelay: '30000'
    });
    $(".EnableTooltip").jqxTooltip({
        content: '<p align=left>Please enable or disable this message template.<BR>A disabled message is ignored by the application.</p>',
        position: 'mouse',
        name: 'movieTooltip',
        position: 'right',
        autoHideDelay: '30000'
    });
    $(".SubjectTooltip").jqxTooltip({
        content: '<p align=left>The Subject of the message.</p>',
        position: 'mouse',
        name: 'movieTooltip',
        position: 'right',
        autoHideDelay: '30000'
    });
	$(".BccTooltip").jqxTooltip({
        content: '<p align=left>Select BCC yes if you want to send email.</p>',
        position: 'mouse',
        position: 'right',
        autoHideDelay: '30000'
    });

});

//==================================================================
//  window open in email template view "/settings/usersemailtemplate"
//==================================================================
var basicDemo = (function() {
    //Adding event listeners
    function _addEventListeners() {
        $('#addrowbutton1').click(function() {
            $('#SystemUserEmailTemplateSubject').val('');
            $('#SystemUserEmailTemplatePlainTextBody').val('');
            $('#ebayuser').val('All');
            $('#SystemUserEmailTemplateWaitForDays').val('0');
            $('#SystemUserEmailTemplateType').val('0');
            $('#TempForm').jqxWindow('open'); // to open the window onclick of open button
        });
        $('#hideWindowButton').mousedown(function() {
            $('#TempForm').jqxWindow('close'); // to close the add emailtemplate window onclick of cancel button
        });
        $('#cancel').mousedown(function() {
            $('#popupWindow').jqxWindow('close'); // to close the edit emailtemplate window onclick of close button of the details tab
        });
        $('.cancelUser').mousedown(function() {
            $('#popupWindow').jqxWindow('close'); // to close the edit emailtemplate window onclick of close button of the rule
        });
    };

    //Creating all page elements which are jqxWidgets
    function _createElements() {
        $('#addrowbutton1').jqxButton({
            width: '70px',
            theme: KiouiTheme
        });
    };

    //Creating the window
    function _createWindow() {
        var offset = $("#jqxgrid").offset();
        $('#TempForm').jqxWindow({
            theme: KiouiTheme,
            position: {
                x: parseInt(offset.left) + 60,
                y: parseInt(offset.top) - 20
            },
            isModal: true,
            modalOpacity: 0.3,
            height: 800,
            width: 800,
            resizable: false,
            autoOpen: false,
            initContent: function() {
                $('#TempForm').jqxWindow('focus');
            },
        });

        // initialize the edit pop up window.
        $("#popupWindow").jqxWindow({
            resizable: false,
            isModal: true,
            autoOpen: false,
            cancelButton: $("#cancel"),
            modalOpacity: 0.3,
            theme: KiouiTheme,
            height: 800,
            width: 800,
        });

    };
    return {
        config: {
            dragArea: null
        },
        init: function() {
            _createElements();
            _addEventListeners();
            _createWindow();
        }
    };
}());

$(document).ready(function() {
    //Initializing the demo
    basicDemo.init();
});

[DimitarParticipant]

Hello pankhi,

Maybe you can display a custom message on a form’s validationError event. E.g.: the second tab is selected, you click the button and the first tab’s form does not pass the validation. You can then show a custom div in the second tab with an error message.

Best Regards,
Dimitar

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

[pankhiParticipant]

thanks validationError works for me. 🙂

[Author]

Posts