客户端验证在带有 Bootstrap 的 ASP.NET MVC5 中不起作用

Posted 2023-05-08

【中文标题】客户端验证在带有 Bootstrap 的 ASP.NET MVC5 中不起作用

【英文标题】：Client-side validation not working in ASP.NET MVC5 with Bootstrap

【发布时间】：2013-11-13 07:28:54

【问题描述】：

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

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

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

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

使用 NuGet，我安装了 jquery.validate 和 jquery.validate.unobtrusive 并将它们添加到 App_Start 中的 jquery 包中。

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

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

【问题讨论】：

如果它具有data-val和其他验证属性，你能检查它生成的html吗？

@WannaCSharp 谢谢。是的，data-val 属性都如预期的那样存在

移除 Bootstrap javascript 后是否有效？

我刚刚从一开始就创建了一个新的 MVC 应用程序，并且验证工作没有任何问题。我一辈子都找不到第一个应用程序不起作用的合理原因。我已经开始一一复制代码和视图，所以如果它停止工作，我可以查明原因。除此之外，完全没有想法。

在上一条消息之后，我现在已将所有代码和视图迁移到“新”应用程序，并且一切正常。令人沮丧 - 从未深究。

【参考方案1】：

我遇到了同样的问题。将生成的 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，果然，RegisterBundles 中没有定义 JQuery 验证包。我必须补充：

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

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

当你引用一个未定义的包时，没有编译时错误，这是相当劣质的。即使是永远在线的运行时错误也比无声的失败要好。浪费了这么多时间！

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

【讨论】：

这个答案对我帮助最大 - 我在 App_Start/BundleConfig.cs 文件中定义了捆绑包，但在我的 _Layout.cs 文件中没有使用它的参考。因此，只需添加 @Scripts.Render("~/bundles/jquerybal") 行就可以神奇地工作。

这个答案也对我有用。除了上述步骤之外，还需要添加 @Scripts.Render

【参考方案2】：

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

jquery.validate.js jquery.validate.unobtrusive.js

【讨论】：

抱歉延迟回复。它已经在那里了——这就是让我发疯的原因。最后，我的解决方案是将所有内容复制到一个新项目中。

诀窍（对我来说）是确保我没有加载它两次......我把它放在“_Layout.cshtml”上，也作为“脚本”的一部分在底部我的“view.cshtml”页面...我注释掉了“脚本”和中提琴...它突然像宣传的那样工作了。

【参考方案3】：

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

否则，这提供了一个很好的概述：ASP.NET MVC 3: Required steps for unobtrusive client-side validation of dynamic/AJAX content。也适用于 MVC5。

【讨论】：

结合<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 为我解决了这个问题。 (MVC5)

但奇怪的是我只是创建了一个全新的应用程序并将我的代码复制回来，一切都开始工作了。

开箱即用，MVC 5 模板默认包含这些。

【参考方案4】：

在页面底部添加：

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

一切都会好起来的。

【讨论】：

_Layout.cshtml 对我来说缺少这个。

Doh。不知道为什么默认情况下它仍然不存在于启动器模板中！

【参考方案5】：

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

@using (Html.BeginForm())

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

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

【参考方案6】：

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

添加

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

在_Layout.cshtml的底部，在上面

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

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

【讨论】：

在我的项目中，_layout.cshtml 中缺少渲染行。确保它插入在 jquery 和 bootstrap 之间 :)

【参考方案7】：

我知道这对游戏来说有点晚了，但这确实增加了验证，我发现它非常有帮助。有时，引用其他 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 的包：

   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>

*注意：确保 bootstrap 位于 bundle 中的 jqueryval 之后

5. 确保 ~/Account/Login.cshtml、~/Account/[e-mail] /strong>等……分别。

<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. （可选）另外，在角色等上查看article。

【参考方案8】：

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

【讨论】：

有趣的是，我猜一个糟糕的缓存可能是个问题。谢谢

【参考方案9】：

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

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

在之前

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

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

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

【参考方案10】：

大家好，这是一个特定的解决方案 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

【参考方案11】：

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

【讨论】：

抱歉延迟回复。不幸的是，这对我来说不是问题。我做了我逐个文件复制并粘贴到一个新项目中，一切都开始工作了。很奇怪。