Prevent Tab Selection When Content Validation Fails

Environment

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

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-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

• API Reference of the TabStrip