Validator with Multiple Tabs - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: animation, custom, event, form, jqxTabs, jqxvalidator, rule, selectionTracker, tab, Tabs, validate, validator

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Validator with Multiple Tabs Posts
April 15, 2014 at 1:14 pm Validator with Multiple Tabs #53116

Carlos Castro
Participant

Hi Team,

I have a tab control with a couple of tabs. Each tab has a different form with a validator for each form.
I use the tab on selected event to capture tab changes and to call the validate method for the form in the current (selected) tab in order to show the tooltip for failed validation fields.

This is working fine if i don’t have the transition animation between tabs enabled (selectionTracker). If i enable the selectionTracker the tooltips do not show up, i’m guessing because of the delay in refreshing the screen between the animation switching from one tab and another.

My question is: Is there any event that i can use fired when the transition between tabs is complete? so after the animation is complete? or do you see any other way to solve the problem?

Thanks you very much for your support,

Best Rebards,
Carlos Castro

April 16, 2014 at 7:30 am Validator with Multiple Tabs #53163
Dimitar
Participant
Hello Carlos Castro,

We confirm the reported behaviour. As a workaround you can call the validate method in a timeout, e.g.:
```
$('#jqxTabs').on('selected', function (event) {
    var selectedTab = event.args.item;
    setTimeout(function () {
        $('#form' + selectedTab).jqxValidator('validate');
    }, 500);
});
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
April 16, 2014 at 8:28 am Validator with Multiple Tabs #53166

Carlos Castro
Participant

Dimitar,

Thanks very much for this. It works perfectly.

Following the same example, i was trying to add to the Tab header a small icon (a red exclamation sign) to point out which Tabs contain errors.
This is because if a user hits the save button and there is a validation error on a tab that is not the selected one at the time, the user does not understand why the save is not happening. This way, when he hits save, and there is a validation error on a non-selected tab, the user will see the red icon on pointing out in which tab there is an error.

My question is, i notice that validation is done on the fly, so if you have a unput field that is mandatory and has a validator error tooltip when blank, as soon as we start typing something, the tooltip will go away. Is there any way that i can hide the tab header icon at that same time? is there any event fired when we start typing and the error tooltip is hidden that i can also use to check if the tab icon can be hidden also?

Thanks again for your support and the solution great solution proposed,

Regards,
Carlos

April 17, 2014 at 6:17 am Validator with Multiple Tabs #53218
Dimitar
Participant
Hi Carlos,

While there is no such event, you can achieve this through a custom rule, e.g.:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#testForm').jqxValidator({ rules: [
                { input: '#userInput', message: 'The username is required', action: 'keyup', rule: function (input, commit) {
                    var value = input.val();
                    if (value.length > 0) {
                        alert("Validation passed");
                        return true;
                    } else {
                        return false;
                    };
                }
                },
                { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}], theme: 'summer'
            });
        });
    </script>
</head>
<body>
    <form id="testForm" action="./">
    <table class="register-table">
        <tr>
            <td>
                Username:
            </td>
            <td>
                <input type="text" id="userInput" class="text-input" />
            </td>
        </tr>
        <tr>
            <td>
                E-mail:
            </td>
            <td>
                <input type="text" id="emailInput" class="text-input" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
```
Best Regards,
Dimitar

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

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.