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

Question

我有多个标签的标签.在每个选项卡中,我有许多文本字段供用户输入.标签条由表单包围,位于提交按钮下方.

我对模型属性进行了注释验证.使用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.此代码段将切换到第一个选项卡并显示错误.

这段代码只是示例,可以重构,但它显示了想法.