Question

I created a form with a telerik tabstrip on it. The form is splitted over multiple tabs. When there is a validation error the current tab (even without a error) stays selected. Is it possible to select the first tab with an error on it.I have already:

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").submit(function () {
             var tabStrip = $('.t-widget.t-tabstrip.t-header').data('tTabStrip');
        });
    }); 
</script> 

I can’t figure out how to iterate trough the tabs and select the tab where the validation error is on.

Answer 1

$(function () {
    function gotoFirstError() {
        var $firstError = $('#myForm .input-validation-error').first();

        if ($firstError.size() === 1) {
            var id = $firstError.parents('.t-content').attr('id');

            var tabStrip = $("#TabStrip").data("tTabStrip");

            tabStrip.select($(".t-item", tabStrip.element)[parseInt(id.replace(/TabStrip-/, '')) - 1]);
        } else {
            console.log('no error found');
        }
    }

    setTimeout(function () {
        gotoFirstError();
    }, 0);

    $('#myForm').bind("invalid-form.validate", function () {
        $('#myForm').validate().showErrors();
        gotoFirstError();
    });
});