我有一个包含一些输入字段的表单。我正在使用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>
我的想法是使用id =“tabStrip-1”获取div中的所有输入字段,并检查它们是否包含class="k-input k-invalid"
,据我所知,当存在时,它会应用于输入字段验证错误。如果输入字段包含类,我将把标签的id更改为此标签,并将焦点设置在该元素上。如果所有字段都有效,我将对下一个选项卡执行相同的操作,我尝试使用Jquery来获取输入元素并预测它们,但我在Web开发方面的技能非常差,而且我没有成功。我认为我的方法会奏效。任何有关工作示例的帮助或更好的方法的建议将不胜感激。谢谢!
答案 0 :(得分:1)
具有所需类的第一个input
字段的选择器将是:
$('input.k-input.k-invalid:first').focus();
但是,我不确定你的意思是“如果输入字段包含类,我将把标签的id改为这个。”
答案 1 :(得分:1)
我不知道kendoTabStrip但是这段代码会让你得到包含错误的第一个标签条的id。
//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;
}
}