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

Question

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

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

Answer 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 将切换到第一个选项卡并出现错误。

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