Setzen Sie den Fokus nach dem Absenden auf das Eingabeelement

Ich habe ein Formular mit einigen Eingabefeldern. Ich verwende das tabStrip KendoUI-Widget, um die Eingabefelder zu gruppieren. Ich verwende den Kendo-Validator und beim Absenden des Formulars werden einige Fehlermeldungen ausgelöst. Das Problem ist, dass wenn sich das Eingabefeld mit der Fehlermeldung auf einem anderen Reiter als dem aktuell ausgewählten befindet, der Benutzer ihn nicht sehen kann. Was ich erreichen möchte, ist, wenn das Formular validiert wird, die Registerkarte mit dem ersten Eingabefeld mit auszuwählender Fehlermeldung und dem Fokus auf diesem Eingabefeld. Hier ist ein Beispielcode:

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

Nach dem Absenden wird die Formularvalidierung ausgelöst und ich finde die erste Registerkarte mit einer Eingabe mit Fehlermeldung. Aber das Setzen des Fokus auf das erste Element mit Fehlermeldung funktioniert nicht. Ich vermute, dass das Eingabeelement nach dem Absenden noch nicht geladen ist. Hier ist der js-Code:

if (!omega.validatable.validate()) {
 //Select all the tab strips
 tabs = $("#tabStrip").find('div[id^=tabStrip]');
 var tabStrip = $("#tabStrip").data("kendoTabStrip");
 //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[class~=k-invalid]').length > 0) {
  tabStrip.select(i);
  // Set focus on the first input element with error message
  $('input.k-input.k-invalid:first').focus();
  break;
 }
 }
 return false;
 }

verwenden

 $(document).ready(function () {
 $('input.k-input.k-invalid:first').focus();
 });

hilft an dieser Stelle auch nicht weiter. Bitte helfen Sie. Danke!

Lösung des Problems

Vielleicht müssen Sie zuerst ein anderes Element defokussieren, wie zum Beispiel:

$("input").blur(`);

als

$('input.k-input.k-invalid:first').focus();