29

运行 Visual Studio 2013，我使用 Bootstrap 创建了一个新的 ASP.NET MVC (5) 项目。

但是，我无法让不显眼的客户端验证工作。

模型具有[Required]相关属性的属性，视图具有ValidationMessageFor...表单中每个字段的标签。

但是，提交表单会导致表单在验证消息出现之前回发到服务器。

使用 NuGet，我已经安装jquery.validate并将jquery.validate.unobtrusive它们添加到App_Start.

然而，它继续顽固地发回服务器。F12 开发工具显示没有 JS 错误/警告。

有没有其他人遇到过这个问题（在 SO 中看不到与 MVC 5 相关的任何内容），您有什么想法吗？

4

11 回答 11

24

我有同样的问题。将生成的 HTML 与有效的网站进行比较，我注意到在文档的末尾，有这样的内容：

<script src="/bundles/jqueryval"></script>

...而捆绑包应该像这样扩展：

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

我查看了 App_Start/BundleConfig.cs，果然，JQuery 验证包没有在RegisterBundles. 我不得不补充：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

为什么会丢失，我不知道。我从一个新的、干净的项目开始。

当您引用未定义的捆绑包时没有编译时错误，这是非常粗制滥造的。即使是永远在线的运行时错误也比无声的失败要好。浪费了这么多时间！

编辑：原来我的项目中也没有 JQuery 验证脚本。我必须通过 NuGet（“Microsoft JQuery Unobtrusive Validation”）添加它们。

于 2014-02-26T10:44:14.643 回答
22

我遇到了同样的问题。解决方案是将 .js 引用添加到母版页 (_Layout.cshtml)

  1. jquery.validate.js
  2. jquery.validate.unobtrusive.js
于 2013-11-13T05:30:04.310 回答
15

您是否<add key="ClientValidationEnabled" value="true" />在 web.config 中进行了验证？

否则，这提供了一个很好的概述：ASP.NET MVC 3：对动态/AJAX 内容进行不显眼的客户端验证所需的步骤。也适用于 MVC5。

于 2013-12-23T01:09:45.393 回答
9

在页面底部添加：

@Scripts.Render("~/bundles/jqueryval")

一切都会好起来的。

于 2014-03-27T03:44:27.147 回答
3

我在玩我的第一个 MVC 项目时遇到了同样的问题。最后的问题是我没有将输入元素包含到表单元素中。是的，非常愚蠢。确保创建表单，例如：

@using (Html.BeginForm())
{
    @Html.EditorFor(model => model.FieldA)
    @Html.ValidationMessageFor(model => model.FieldA)

    @Html.EditorFor(model => model.FieldB)
    @Html.ValidationMessageFor(model => model.FieldB)

}
于 2014-06-27T09:45:57.460 回答
3

由于使用 MVC 游览而不是添加到每个编辑视图中，因此您可以在视图/共享文件夹中添加_Layout.cshtml.

只需添加

@Scripts.Render("~/bundles/jqueryval")

在 _Layout.cshtml 的底部，在顶部

@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval")

在这种情况下，脚本将影响使用该布局的每个页面。

于 2014-08-24T18:29:38.667 回答
2

我知道这对游戏来说有点晚了，但这确实增加了验证，我发现它非常有帮助。有时，引用其他 jquery 版本的冲突 javascript/jQuery 插件/API 引用（例如：searchMeme.js）可能会导致问题，因此我为帐户登录操作创建了唯一的捆绑包。这些是我将采取的步骤：

1.为AccountController.cs创建一个单独的布局~/Views/Shared/_AccountLayout.cshtml。

2.使用以下命令创建新的~/Account/_ViewStart.csthml：

@{
    Layout = "~/Views/Shared/_AccountLayout.cshtml";
}

3.在BundleConfig.cs中为AccountController创建两个css & js的bundle ：

   bundles.Add(new StyleBundle("~/Content/accountcss").Include(
                "~/Content/site.css",
                "~/Content/bootstrap.css",
                "~/Content/font-awesome.css")); /*if using font-awesome */

   bundles.Add(new ScriptBundle("~/bundles/accountjs").Include(
                "~/Scripts/jquery-1.10.2.js",
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/bootstrap.js"));//must be after jquery validate

4.在_AccountLayout.cshtml中引用head & body两端的bundle，如下：

        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
         @Styles.Render("~/Content/accountcss")
        @Scripts.Render("~/bundles/modernizr")
        @this.RenderSection("MetaContent", false)
        @this.RenderSection("Styles", false)
        </head>

        @Scripts.Render("~/bundles/accountjs")
        @this.RenderSection("Scripts", false)
        </body>

*注意：确保引导程序在捆绑包中的 jqueryval 之后

5.确保您在~/Account/Login.cshtml、~/Account/Register.cshtml等中分别拥有@Html.ValidationMessageFor每个输入字段。

<div class="form-group">
       @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
          <div class="col-md-10">
               @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
          </div>
</div>

6.使用 DataAnnotations 创建额外的自定义验证错误[RegularExpression(@"^([\w]{2,20})@?([\w]{2,20}).?[a-zA-Z]{2,3}$", ErrorMessage="")]：

[Required(ErrorMessage = "*Username is required."), RegularExpression(@"^[\w+]{3,10}\s?([\w+]{3,15})$", ErrorMessage = "*Username can only be Alphanumeric"),StringLength(25, ErrorMessage = "The {0} must be at least {2} characters long and no bigger than {1} characters.", MinimumLength = 5)]
public string UserName { get; set; }

7.（可选）最后，如果您更改了密码的 DataAnotation，那么您还必须更改~/App_Start/IdentityConfig.cs中的密码策略，如下所示：

manager.PasswordValidator = new PasswordValidator
{
    RequiredLength = 6,
    RequireNonLetterOrDigit = false,
    RequireDigit = true,
    RequireLowercase = true,
    RequireUppercase = true,
};

8.（可选）另外，请查看有关角色等的这篇文章。

于 2014-11-27T13:33:32.647 回答
1

我遇到了同样的问题，我的解决方案是清除浏览器中的所有历史记录（缓存、cookie、表单……）并且一切正常。

于 2013-12-03T19:00:23.743 回答
0

我认为@Html.ValidationMessageFor模板中缺少这一点。我确实收到了错误，但没有收到消息。

于 2013-11-22T16:25:47.627 回答
0

我正在为未来的读者提供这个答案。我正在处理同样的问题，发现问题出在渲染脚本的顺序上。确保

@Scripts.Render("~/bundles/jquery")

是之前

@Scripts.Render("~/bundles/jqueryval")

在 _layout.cshtml 中。布局底部应如下所示。

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
于 2018-11-03T04:55:20.003 回答
0

大家好，这是一个特定的解决方案 1）首先在您的 Webconfig 文件中添加以下项目

  <appSettings>
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

2） Ex（Index.cshtml）将此jquery源添加到您的cshtml的上方

<body>
 <script src="~/Content/js/jquery-1.11.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>

</body>

更多https://www.youtube.com/watch?v=PLe7WbsuHPU

于 2021-01-03T11:18:49.130 回答