多个选项卡中的 MVC 表单验证 - 自动跳转到有验证错误的选项卡？

Posted 2023-04-13

【中文标题】多个选项卡中的 MVC 表单验证 - 自动跳转到有验证错误的选项卡？

【英文标题】：MVC form validation in multiple tabs - auto jump to tab with validation errors?

【发布时间】：2011-09-13 07:46:03

【问题描述】：

我有带有多个标签的标签条。在每个选项卡中，我都有许多文本字段供用户输入。 tabstrip 被一个表单包围，就在提交按钮的下方。

我已经对模型属性进行了注释验证。使用 Jquery 验证可以正常工作。但是，如果用户在字段中输入错误，转到不同的选项卡并按提交，则错误将出现在非活动选项卡中，因此用户看不到。我希望 Jquery 验证自动转到带有验证错误的选项卡，以便用户可以看到它。这可能吗？

【参考方案1】：

我认为没有现成的解决方案。但是你可以很容易地用 javascript 做到这一点。您所做的是在提交表单时查看每个选项卡的内容，如果发现验证错误，则切换到该选项卡。

这里是示例：

<script type="text/javascript">
    $(document).ready(function () 
        $("#myForm").submit(function () 
            $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id);
        );
    );
</script>

此示例假定您的表单 ID 是 myForm，您的选项卡 ID 是选项卡。它还假设您在 web.config 中有 ClientValidationEnabled = true 和 UnobtrusiveJavaScriptEnabled = true。此代码 sn -p 将切换到第一个选项卡并出现错误。

此代码只是示例，可以重构，但它显示了想法。

【讨论】：

您还可以在提交处理程序中添加小的可用性功能$("#myForm.input-validation-error").focus();。这将集中无效输入。用户会感谢你的:)