いくつかの入力フィールドを持つフォームがあります。入力フィールドをグループ化するために、tabStrip KendoUI ウィジェットを使用しています。Kendo バリデーターを使用しています。フォームが送信されると、いくつかのエラー メッセージが表示されます。問題は、エラー メッセージが表示された入力フィールドが別のタブにある場合、現在選択されているユーザーがそれを見ることができないことです。私が達成したいのは、フォームが検証されたときに、エラーメッセージが選択され、フォーカスがその入力フィールドにある最初の入力フィールドを含むタブです。サンプルコードは次のとおりです。
<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>
送信後、フォームの検証がトリガーされ、入力を含む最初のタブにエラー メッセージが表示されます。ただし、エラー メッセージのある最初の要素にフォーカスを設定しても機能しません。送信後に入力要素がまだ読み込まれていないと思われます。jsコードは次のとおりです。
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;
}
使用して
$(document).ready(function () {
$('input.k-input.k-invalid:first').focus();
});
この時点でも役に立ちません。助けてください。ありがとう！