Question

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

我遇到了同样的问题。将生成的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”）。

Answer 3

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

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

Answer 4

在页面底部添加：

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

一切都会正常。

Answer 5

由于使用MVC巡视而不是添加到每个编辑视图，您可以在_Layout.cshtml中添加view / shared文件夹。

只需添加

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

位于_Layout.cshtml的底部，位于

之上

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

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

Answer 6

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

Answer 7

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

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

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

}

Answer 8

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

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

2. ：创建新的〜/ Account / _ViewStart.csthml ：

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

3. 为css＆amp;创建两个捆绑包用于AccountController的 BundleConfig.cs 中的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. 引用 head ＆amp;的两端的捆绑包 _AccountLayout.cshtml 中的正文：

        <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在包中的jqueryval之后

5. 确保〜/ Account / Login.cshtml ，〜/ Account / Register中的每个输入字段都有@Html.ValidationMessageFor。分别是cshtml 等。

<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 中的密码策略：< / p>

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

<强> 8。（可选）另外，请查看角色等article。

Answer 9

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

Answer 10

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

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

之前

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

_layout.cshtml中的

。布局底部应如下所示。

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

Answer 11

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

使用Bootstrap在ASP.NET MVC5中无法使用客户端验证

11 个答案: