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

10 posts, 0 answers
  1. Dan Foster
    Dan Foster avatar
    21 posts
    Member since:
    Jun 2010

    Posted 04 Nov 2013 Link to this post

    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.
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 04 Nov 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Dan Foster
    Dan Foster avatar
    21 posts
    Member since:
    Jun 2010

    Posted 04 Nov 2013 Link to this post

    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.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 05 Nov 2013 Link to this post

    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!
  6. Dan Foster
    Dan Foster avatar
    21 posts
    Member since:
    Jun 2010

    Posted 06 Nov 2013 Link to this post

    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.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 07 Nov 2013 Link to this post

    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!
  8. Dan Foster
    Dan Foster avatar
    21 posts
    Member since:
    Jun 2010

    Posted 07 Nov 2013 Link to this post

    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.
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 11 Nov 2013 Link to this post

    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!
  10. Bruno
    Bruno avatar
    6 posts
    Member since:
    Nov 2014

    Posted 18 Mar Link to this post

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

  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 21 Mar Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready