如何使用MVC客户端验证将焦点移动到第一个错误字段？

Question

我使用MicrosoftMvcValidation.js进行客户端验证.错误消息显示正确.但是,我的页面很长,当错误显示时,它不会自动向上滚动以显示第一条错误消息或将焦点设置为错误字段.如何在按钮旁边显示一条消息,如"错误发生.请更正您的输入",但没有字段错误列表; 或自动将焦点移动到第一个错误字段？

Answer 1

每当出现验证错误时，客户端验证都会input-validation-error向导致验证的输入框添加类。例如，在 MVC3 中，如果启用了不显眼的验证，您将获得额外的 javascript 文件添加到您的文件中，例如

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

这意味着您可以在这些行之后使用自己的 jQuery 函数来检测输入验证错误是否存在。这段代码是我在我的应用程序中使用的：

$(document).ready(function () {
    $("form[action*='New/']").submit(function () {
        var firstError = $(this).children(":first has('.input-validation-error')");

        if (firstError != null) {
            firstError.focus();

            return false; // no form posting
        }
    });
});

将 替换form[action*='New/']为您的表单操作，例如form[action*='/MyController/MyRegistrationAction/']（*=表示在任何位置查找此文本）。