Question

任何人都可以告诉我为什么客户端验证在我的MVC 4应用程序中不起作用。

_layout.schtml

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

在我的web.config中，我有：

<appSettings>
   <add key="ClientValidationEnabled" value="true" />
   <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

在我的login.cshtml页面中，我有：

@using (Html.BeginForm())
{
    <div class="formscontent">

        <ol>
            <li>
                @Html.LabelFor(x => x.AgreementNumber)
                <br />
                @Html.TextBoxFor(x => x.AgreementNumber, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.AgreementNumber)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.UserName)
                <br />
                @Html.TextBoxFor(x => x.UserName, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.UserName)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.Password)
                <br />
                @Html.PasswordFor(x => x.Password, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.Password)
                <br />
                <br />
            </li>
        </ol>

    </div>

    <ol>
        <li>
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
        </li>
    </ol>

    <br />

    <input class="mainbutton" type="submit" value="@Model.Localisation.TranslateHtmlString("LogonBtn")" /><br />
    <div style="text-align: left; padding: 0 5px 5px 10px;">
        Forgot login-info? clik <a class="link" href="@Url.Action("Index", "Credentials")">here.</a>
    </div>

}

在登录页面的底部：

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

我的浏览器启用了JavaScript。在Visual Studio的MVC 4模板项目中，客户端验证工作正常。

在查看页面源时，在登录页面上运行应用程序，我看到这个呈现：

<label for="AgreementNumber">number</label>
<br />
<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />
<br />
<span class="field-validation-valid" data-valmsg-for="AgreementNumber" data-valmsg-  replace="true"></span>

并在底部：

<script src="/BMWebsite/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.inline.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.unobtrusive.js"></script>

我的模型属性已注释：

public class LogonModel : ModelBase
{
    [MyRequired("AgreementNumberRequiredProperty")]
    [MyDisplay("AgreementNumberLabel")]
    public string AgreementNumber { get; set; }

    [MyRequired("UserNameRequiredProperty")]
    [MyDisplay("UserNameLabel")]
    public string UserName { get; set; }

    [MyRequired("PasswordRequiredProperty")]
    [DataType(DataType.Password)]
    [MyDisplay("PasswordLabel")]
    public string Password { get; set; }

    [MyDisplay("RememberMeCheckBox")]
    public bool RememberMe { get; set; }
}

MyRequired是从常规RequiredAttribute派生的类。原因是我的错误消息通过覆盖FormatErrorMessage(string name)类的RequiredAttribute方法进行了本地化。它工作正常 - 我的标签和错误消息已本地化。

MyRequired.cs

public class MyRequiredAttribute : RequiredAttribute
{
    private readonly string _errorMessagekey;

    public MyRequiredAttribute(string errorMessage)
    {
        _errorMessagekey = errorMessage;
    }

    public override string FormatErrorMessage(string name)
    {
        var translation = HttpContext.Current.Session["translation"] as LocalisationHelper;

        return translation != null ? translation.Translate(_errorMessagekey) : ErrorMessage;
    }
}

我在我的登录操作方法的POST版本中放了一个断点，它正被命中。表单将发布到服务器端验证发生的服务器。客户端验证不会发生。

我错过了什么？

谢谢。

Answer 1

我遇到了同样的问题。似乎没有加载不显眼的验证脚本（参见最后的截图）。我通过在_Layout.cshtml

的末尾添加来修复它

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

最终结果：

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/jqueryval")
   @RenderSection("scripts", required: false)

除了我非常标准的CRUD视图外，一切都是Visual Studio项目模板的默认设置。

解决问题后加载脚本： enter image description here

Answer 2

请务必在每个要使验证处于活动状态的视图末尾添加此命令。

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 3

在Global.asax.cs中，Application_Start（）方法添加：

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MyRequiredAttribute), typeof(RequiredAttributeAdapter));

Answer 4

您可能已经解决了这个问题，但我通过使用App_Start更改BundleConfig中jqueryval项的顺序获得了一些运气。客户端验证即使在新的开箱即用的MVC 4互联网解决方案上也无法运行。所以我更改了默认值：

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

到

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

现在我的客户端验证工作正常。你只是想确保不显眼的文件在最后（所以它不是侵入性的，哈哈：）

Answer 5

输入中没有数据验证属性。确保您已使用服务器端帮助程序（如Html.TextBoxFor）生成它，并且它位于表单内：

@using (Html.BeginForm())
{
    ...
    @Html.TextBoxFor(x => x.AgreementNumber)
}

此外，我不知道jquery.validate.inline.js脚本是什么，但如果它以某种方式取决于jquery.validate.js插件，请确保它在之后被引用。

在所有情况下，请在浏览器中查看您的javascript控制台是否存在潜在错误或缺少脚本。

Answer 6

我终于通过在我的.cshtml文件中直接包含必要的脚本来解决这个问题，按此顺序：

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

这有点偏离主题，但我不断惊讶于这种事情在Web编程中发生的频率，即一切似乎都已到位但是一些模糊的调整对于推动事情的发展是必要的。脆弱，脆弱，脆弱。

Answer 7

验证数据 - *属性未在渲染的html中显示输入的原因可能是没有表单上下文。使用@using(Html.BeginForm(...)) { ... }创建表单时会自动创建FormContext。

如果您为表单使用常规html标记，则不会获得客户端验证。

Answer 8

对我而言，这是一个很大的搜索。最终我决定使用NuGet而不是自己下载文件。我删除了所有涉及的脚本和scriptbundles并获得了以下软件包（截至目前为止的最新版本）

jQuery（3.1.1）
jQuery验证（1.15.1）
Microsoft jQuery Ubobtrusive Ajax（3.2.3）
Microsoft jQuery Unobtrusive Validation（3.2.3）

然后我将这些包添加到BundleConfig文件中：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.unobtrusive-ajax.js"));

我将此引用添加到_Layout.cshtml：

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

我将此引用添加到我需要验证的视图中：

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

现在一切正常。

不要忘记这些事情（很多人都忘了）：

表格标签（@using（Html.BeginForm（）））
验证摘要（@ Html.ValidationSummary（））
您输入的验证消息（示例： @ Html.ValidationMessageFor（model =＆gt; model.StartDate））
配置（）
添加到捆绑包中的文件的顺序（如上所述）

Answer 9

我遇到验证问题，表单发布然后验证，

这不适用于jquery cdn

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

此作品没有jquery cdn

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

希望帮助某人。

Answer 10

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

这段代码对我有用。

Answer 11

在我的情况下，验证本身正在工作（我可以验证一个元素并检索一个正确的布尔值），但是没有可视输出。

我的错是我忘记了这一行 @ Html.ValidationMessageFor（m =＆gt; ...）

TS在他的代码中有这个并让我走上正轨，但我把它放在这里作为其他人的参考。

Answer 12

这对我有用转到模型类，并在任何道具上方设置错误消息

[Required(ErrorMessage ="This is Required Field")]
    public string name { get; set; }

通过Ctrl +导入Required的名称空间。最后在视图中添加

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Answer 13

下面的行显示您尚未在AgreementNumber

上设置所需的DataAttribute

<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />

你需要

[Required]
public String AgreementNumber{get;set;}

Answer 14

使用：

@ Html.EditorFor

而不是：

@ Html.TextBoxFor

Answer 15

我创建了这个html <form action="/StudentInfo/Edit/2" method="post" novalidate="novalidate">，其中novalidate="novalidate"阻止了客户端jQuery的执行，当我删除novalidate="novalidate"时，客户端jQuery已启用并且正在工作。

Answer 16

我想在这篇文章中添加，我在PartialView中遇到了同样的问题。

我需要添加

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

到局部视图，即使已存在于_Layout视图中。

参考文献：

Data Annotations / Validation not working for partial views

Answer 17

我的问题出现在web.config中：UnobtrusiveJavaScriptEnabled已关闭

<appSettings>

<add key="ClientValidationEnabled" value="true" />

<add key="UnobtrusiveJavaScriptEnabled" value="false" />

</appSettings>

我改为现在工作：

`<add key="UnobtrusiveJavaScriptEnabled" value="true" />`

Answer 18

在我的情况下，我添加了id等于在html上为VS自动生成的名称，在代码中我添加了一行代码。

#include <shlobj.h>
#include <Pathcch.h>

TCHAR szFolderPath[MAX_PATH];

if (SHGetSpecialFolderPath(NULL, szFolderPath, CSIDL_LOCAL_APPDATA, FALSE))
{
    PathCchAddBackslash(szFolderPath, MAX_PATH);
    cout << szFolderPath << endl;
}

Answer 19

确保您使用的Attributes名称空间下的RequiredAttribute（例如System.ComponentModel.DataAnnotations）

Answer 20

  @section Scripts
 {
<script src="../Scripts/jquery.validate-vsdoc.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.min.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.min.js"></script>
}

MVC 4客户端验证无法正常工作

_layout.schtml

MyRequired.cs

20 个答案: