This is a migrated thread and some comments may be shown as answers.

How do I jump to the tab with a validation error on?

10 Answers 162 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Dan Foster
Top achievements
Rank 2
Dan Foster asked on 04 Nov 2013, 11:20 AM
Hi,

I'm using the TabStrip to break up the data I need to submit, and the Kendo client-side validator to perform validation on that data.

If I'm on the 2nd tab and click the form's submit button and there's a piece of data missing from the 1st tab (i.e. it fails validation), how can I "jump back" to the tab with the validation error on? The validator works perfectly, e.g. it stops form submission, displays the error message (when you gp back to the tab manually), I just need to move the user back to the tab with the error message on.

Thank you,

Dan F.

10 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 04 Nov 2013, 12:09 PM
Hi Dan,

You can navigate between different views using the built in navigate() method of the Kendo UI Mobile application. You can read more about it on the following link:

http://docs.kendoui.com/api/mobile/application#methods-navigate
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan Foster
Top achievements
Rank 2
answered on 04 Nov 2013, 04:58 PM
I was aware of the naviagte ability; the question is how do I know what tab the validation error was on?  Would I have to hook into the validation event to get the first failing control, then see what tab it was on? If so, how do I hook into the validation event? ;-)

Thank you,
Dan F.
0
Kiril Nikolov
Telerik team
answered on 05 Nov 2013, 08:53 AM
Hi Dan,

The functionality that you are looking for is not supported. You will need to find a way which input is failing validation and then navigate to the respective page. However I am not really sure that validating form spread on different views is a good design from usability perspective.

Did you take a look at the following code library, showing how to use validation summary?

http://www.kendoui.com/code-library/mobile/application/displaying-validation-summary-in-mobile-application.aspx
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan Foster
Top achievements
Rank 2
answered on 06 Nov 2013, 11:22 AM
That's a great solution, and does what's required. I've removed the standard MVC Html.ValidationMessageFor controls from the fields and I still get the validation message appearing, which is great.

However, one of the overloaded methods for the ValidationMessageFor allowed you to place another piece of text for the validation message, e.g. an asterisk. When used with the standard MVC Html.ValidationSummary, you would get the full error message displayed in the validation summary and the asterisk next to the field with the error - is there a way of doing the same thing with the Kendo validator?

Thank you,

Dan F.
0
Kiril Nikolov
Telerik team
answered on 07 Nov 2013, 07:28 AM
Hi Dan,

You can create custom validation messages using the Kendo UI Validator. If you want to read more about it, please follow this link:

http://docs.kendoui.com/api/framework/validator#configuration-Defining
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan Foster
Top achievements
Rank 2
answered on 07 Nov 2013, 02:55 PM
Hello Kiril,

Thank you, but I've already read that info, and it doesn't do what the standard MVC controls do, i.e. display an asterisk next to the field that failed and display the actual error message in the validation summary.

Thank you,

Dan F.
0
Kiril Nikolov
Telerik team
answered on 11 Nov 2013, 12:55 PM
Hi Dan,

The functionality that you are looking for is not supported out of the box with the Kendo UI Validator. What I can suggest you as a workaround is to use the validate event of the Kendo UI Validator in order to manage and change the validation messages that are displayed in the summary.
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Planet s.r.l.
Top achievements
Rank 1
answered on 18 Mar 2016, 12:24 PM

this works for me:

$("#grid").data("kendoGrid").bind("edit", function(e) {
 
    var container = e.container;
 
    container.data("kendoValidator").bind("validate", function(e){
            if (!e.valid) {
                var fieldName = Object.keys(e.sender._errors)[0];
                var closest = container.find("[name=" + fieldName + "]").closest("div[role=tabpanel]");
                var tabstrip = container.find("[data-role=tabstrip]");
                tabstrip.find(">[role=tabpanel]").each(function(i){
                    if (closest.attr("id") !== this.id)
                        return;
                    tabstrip.data("kendoTabStrip").select(i);
                });
            }
 
    });
});

0
Kiril Nikolov
Telerik team
answered on 21 Mar 2016, 08:29 AM
Hello Bruno,

Thanks for sharing this, I am sure it will help other customers as well!

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alon
Top achievements
Rank 1
Veteran
answered on 05 Dec 2019, 04:47 PM

This was really great. Thank you. Just what I was looking for.

I made some slight changes to the validate event handler so it would be more generic..

if (!e.valid) {
    var fieldName = Object.keys(e.sender._errors)[0];
    var closest = $(e.sender.element[0]).find("[name=" + fieldName + "]").closest("div[role=tabpanel]");
    var tabstrip = $(e.sender.element[0]).find("[data-role=tabstrip]");
    tabstrip.find(">[role=tabpanel]").each(function(i){
        if (closest.attr("id") !== this.id)
            return;
        tabstrip.data("kendoTabStrip").select(i);
    });
}

 

Tags
TabStrip
Asked by
Dan Foster
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Dan Foster
Top achievements
Rank 2
Planet s.r.l.
Top achievements
Rank 1
Alon
Top achievements
Rank 1
Veteran
Share this question
or