Custom popup editor using Bootstrap tabs - switch tabs on validation error

[Mat]

I've got a few custom popup grid editors that are grouping related fields using Bootstrap tabs.

I'm trying to find a way to switch tabs in the event of a validation error (using the built-in Kendo validation). At this moment, if a user has a particular tab open, and fails to complete a required field on a different tab, the save fails without any visual hints.

I've previoulsy found a solution when using jQuery validate (but I can't find it now) but I'd rather use Kendo's validation for simplicity.

Any suggestions?

[Stefan]

Hello James,

In this scenario, I can suggest using the validate event of the Kendo UI Validator and check if the form is valid. If the form is not valid, use a custom logic to determine which field is invalid and programmatically switch the tab to the one containing the invalid field:

http://docs.telerik.com/kendo-ui/api/javascript/ui/validator#events-validate

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Mat]

I had to revisit this issue recently and I've come up with the following solution in case it helps anyone else:

var validator = e.container.data('kendoValidator');

validator.bind("validate", function(e) {
  $(".tab-content").find('.k-invalid').parents('.tab-pane').each(function(){
    var id = $(this).attr("id");
    $('ul[role=tablist] a[href="#'+id+'"]').tab('show');
    return;
  });
});

This is placed in the edit event handler in the grid configuration. The first line gets a reference to the kendo Validator that's automatically bound to the edit window. The function bound to the validate event simply finds the invalid field(s) and gets the ID of the containing tab and shows it.

You can also use the reference to the Validator to add a validation summary to the popup editor window:

validator.setOptions({
  validationSummary: {
    container: "#validation-summary"
  }
});

[Neli]

Thank you very much for sharing your solution with the community.

I am sure it will be helpful to the other users in the forum.

Regards,

Neli