Question

I have a form with some input fields. I am using the tabStrip KendoUI widget to group the input fields. I am using the Kendo validator and when the form is submitted some error messages are triggered. The problem is that if the input field with the error message is on a different tab then the currently selected the user cannot see it. What I want to accomplish is when the form is validated the tab containing the first input field with error message to be selected and the focus to be on that input field. Here is some sample code:

<script type="text/javascript">
    $("#tabStrip").kendoTabStrip();
</script>

<div id="tabStrip">
    <ul>
        <li class="k-state-active">Master Info</li>
        <li>Developer Info</li>
    </ul>
     <div id="tabStrip-1">
         <div>
            <label for="folderName" class="required">Folder Name:</label>
            <input type="text" id="folderName" name="folderName"  required />
            <span class="k-invalid-msg" data-for="folderName"></span>
        </div>
        <div>
            <label for="afk">Afk:</label>
            <input type="text" id="afk" name="afk" data-bind = "value: Afk" />
        </div>
     </div>
     <div id="tabStrip-2">
         <div>
            <label for="updateFolder" class="required">Update Folder:</label>
            <input type="text" id="Text1" name="updateFolder" class="k-input k-invalid" required />
            <span class="k-invalid-msg" data-for="updateFolder"></span>
        </div>
        <div>
            <label for="age">Age:</label>
            <input type="text" id="age" name="age" class="k-input k-invalid" data-bind = "value: Age" />
        </div>
     </div>
</div>

My idea is to take all the input fields that are in div with id=”tabStrip-1″ and check if they contain class="k-input k-invalid" which as far as I understand is applied to the input field when there is a validation error. If the input field contains the class I will change the id of the tab to be this one and set the focus on that element. If all fields are valid I will do the same with the next tab, I tried this with Jquery to take the input elements and foreach them but my skills in web development are very poor and I did not succeed. I think my approach will work though. Any help with working example or suggestions for better approach will be greatly appreciated. Thank You!

Answer 1

I don’t know the kendoTabStrip but this code will get you the id of the first tab strip containing an error.

​
//Select all the tab strips
tabs = $("#tabStrip").find('div[id^=tabStrip]');
first_error_id = "";
//Loop through the tab strips looking for an input containing the error class
for(var i = 0; i < tabs.length; i+=1){
    if ($(tabs[i]).find('input.k-input.k-invalid').length > 0) {
        first_error_id = tabs[i].id;
        break;
    }
}