我有一个带有一些输入字段的表单。我正在使用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();
});
在这一点上也没有帮助。请帮助。谢谢!
4条答案
按热度按时间bn31dyow1#
也许您需要先取消其他元素焦点,例如:
比
sxissh062#
这将侦听发生任何提交
或者用于更具体用途。
也将您的输入 Package 在
<form></form>
中,否则提交不会触发。更新
由于您的表单分布在不同的选项卡上,因此您需要将整个表单用表单标签 Package 起来。
这将对按下的表单按钮做出React,并确保文本框中的数据也被保留。
如果这个静态帖子(即你的php将返回一个新的页面,那么需要action属性,但是你也可以把它做成一个 AJAX 帖子,这意味着你不会离开这个页面。
现在它将正常发布表单,并在返回时将焦点设置在输入上...但是,由于它们位于不同的选项卡中,您可能还需要切换回文本框选项卡。
6l7fqoea3#
试试这个
oo7oh9g94#
实际上有一个非常简单的聚焦解决方案。进入输入元素并键入“自动聚焦”。就是这样。