Prevent Tab Selection When Content Validation Fails

Environment

Product Version 2013.3 1119
Product TabStrip for ProgressĀ® Kendo UIĀ®

Description

How can I validate the current tab when the user selects another tab and also prevent user interaction with the active tab if the current tab validation is not passing?

Solution

To check for validation errors and prevent the selection, use the select event of the TabStrip.

<div id="tabstrip">
    <ul>
        <li class="k-state-active">Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>
        <div id="work-add-edit-form">
            <input id="fullname"
                   type="text"
                   name="fullname"
                   class="k-textbox"
                   placeholder="Full name"
                   required
                   validationMessage="Enter {0}"
                   style="width: 220px;" />
        </div>
    </div>
    <div>Content 2</div>
</div>

<script>
    var onSelect = function(e) {
        var container = $("#work-add-edit-form");
        kendo.init(container);
        container.kendoValidator();

        var validator = $("#work-add-edit-form").kendoValidator().data("kendoValidator");
        if (!validator.validateInput($("#fullname"))) {
          e.preventDefault();
        }
    };

    var tabStrip = $("#tabstrip").kendoTabStrip({
        select: onSelect
    }).data("kendoTabStrip");
</script>

See Also

In this article
Not finding the help you need? Improve this article