1

我有一个带有一些输入字段的表单。我正在使用 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 开发方面的技能非常差，我没有成功。我认为我的方法会奏效。任何有关工作示例的帮助或更好方法的建议将不胜感激。谢谢你！

4

2 回答 2

1

input具有所需类的第一个字段的选择器将是：

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

但是，我不确定“如果输入字段包含类，我会将选项卡的 id 更改为这个”是什么意思。

于 2012-06-15T07:35:48.823 回答
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;
    }
}
于 2012-06-15T08:06:15.720 回答