Javascript 我如何关注有验证错误的返回表单

我正在使用asp.net mvc-5 web应用程序，在“联系我们”视图的中间有以下“联系我们”表单：-

 <div class="col-sm-8 col-sm-push-4">
                    <h2>Contact Us1</h2>
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    @if (TempData["message"] != null)
                    {

                        <div class="alert alert-success">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>

                            <strong> @TempData["message"].</strong>

                        </div>
                    }
                    @using (Html.BeginForm())
                    {
                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">

                            <hr />

                            <div class="form-group">
                                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) <span style="color:red">*</span>
                                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Telephone, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Telephone, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.TextAreaFor(model => model.Message, new { @cols = 60, rows = 10, @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Submit" class="btn btn-success" /><span id="progress" class="text-center" style="display: none;">
                                        <img src="~/img/ajax-loader.gif" />

                                    </span>
                                </div>
                            </div>
                        </div>
                    }
                </div>

现在我面临的问题是：- 1.由于contact us表单显示在页面中间，因此小屏幕上的用户可能会提交表单，然后Post请求失败（模型验证失败），此时将再次呈现contact us表单，并显示验证错误，但用户可能看不到表单，因为默认情况下浏览器将移到顶部。虽然在大屏幕上，用户仍然可以看到表单，但在移动浏览器上，用户可能会错过他们刚刚提交的表单上存在的错误

所以我在想，如果有办法做到这一点：-

如果表单呈现错误，是否强制浏览器（使用jquery表单示例）转到表单，以便用户可以看到验证错误？ 有人能告诉我这件事吗

---

将

@Html.ValidationSummary（false，“，new{@class=“text danger”}）

放在页面顶部。将true更改为false以显示所有属性级别的错误。

首先，您需要将

@Html.ValidationSummary（）

代码放在表单标记中，以使其正常工作

您可以使用javascript在视图中滚动到表单。为表单（或要滚动到的位置附近的元素）指定

id

属性

@using (Html.BeginForm("Contact", "yourControllerName", FormMethod.Post, new { id = "form" }))

然后添加以下脚本（在document.ready内）

并修改POST方法，以便在出现错误时添加

ViewBag

属性

ModelState.AddModelError("", "Cannot ..... info.");
ViewBag.HasError = true; // add this
return View(c)

旁注：未经测试，但您也应该能够使用

if ('@ViewContext.ViewData.ModelState.Values.SelectMany(v => v.Errors).Any()') {

---

作为使用

ViewBag

属性的替代方法。

即使ValidationsUMMRY设置为true，也会显示属性级别。。这两个设置不相关。。。将validationsummary设置为false意味着属性级别将在摘要和相关字段旁边显示两次…当然，无论传递到validationsummary的内容是什么，都会显示单独的验证消息。我指的是验证摘要，如果传入false，它将输出属性级错误。但是Html.ValidationSummary是否应该位于表单标记内，或者我可以将其放置在表单标记外的页面顶部？无论您将其放置在何处，它都将呈现。您自己试试。ValidationSummary“返回ModelStateDictionary对象中验证消息的无序列表（ul元素）。”逐字逐句来自MSDN。当页面第一次加载时，您可以使用一点javascript/jquery滚动到表单-但是您想一直这样做吗，或者当您因为

ModelState

错误而返回视图时？@StephenMuecke我只想在出现验证错误时将焦点移到表单上..谢谢如果您必须使用javascript，那么为什么不保持简单，只使用客户端验证呢？谢谢您的回复，我将尝试您的方法，，，但是我有一个问题你提到过，我需要在表单标记中包含@Html.ValidationSummary（）代码，这样它才能正常工作，但在我目前的情况下，我将它放在表单标记之外，它工作正常，我的意思是它会显示任何模型错误，与在表单标记内时相同。在您的情况下，它将工作，因为您已设置了

true

参数（即仅用于显示模型级错误），但如果要显示所有错误，则它将无法正常工作，因此最好将其放在表单内tags@StephenMuecke现在我定义这个Html.ValidationSummary（false，“出错了”，新的{class=“text danger”}出现在表单标记的外面，它按预期工作..尽管我在web上搜索了这个问题，许多用户都提到他们会得到错误，Html.ValidationSummary（）需要在表单标记中定义，如下所示，但在我当前的项目中并非如此。现在我使用的是mvc 5.2，可能这在这个mvc版本上是固定的，不确定…@MathewHellums，因为

jquery.validate.unobtrusive.js

中的代码搜索表单，只有找到一个表单，它才会连接

jquery.validate]的规则e、 js

（正如我对johnG所指出的，在这种情况下，它可能在表单之外，但最好将它放在表单内部，这样cleint端验证也会连接起来）@johnG。不确定为什么要

@Html.ValidationSummary（false）；

-然后将错误消息显示两次。由于在POST方法中添加了模型级错误，因此将显示该错误，以便用户看到某个无效的消息，然后他们将继续向下滚动并查看与每个控件相关的错误和特定错误。奇怪的是，您希望显示两次当它的全部目的是处理小屏幕上的视图时。

ModelState.AddModelError("", "Cannot ..... info.");
ViewBag.HasError = true; // add this
return View(c)

if ('@ViewContext.ViewData.ModelState.Values.SelectMany(v => v.Errors).Any()') {