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

[Dan Foster]

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.

[Kiril Nikolov]

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

[Dan Foster]

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.

[Kiril Nikolov]

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

[Dan Foster]

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.

[Kiril Nikolov]

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

[Dan Foster]

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.

[Kiril Nikolov]

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

[Planet s.r.l.]

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);
                });
            }

    });
});

[Kiril Nikolov]

Hello Bruno,

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

Regards,
Kiril Nikolov
Telerik

 

 

[Alon]

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);
    });
}