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

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项目模板的默认设置.

修复问题后加载的脚本:

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

我终于通过在我的.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 6

您的输入中没有数据验证属性.确保使用服务器端帮助程序(如Html.TextBoxFor)生成它并且它位于表单内:

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

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

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

Answer 7

如果您在客户端使用jquery.validate.js和 jquery.validate.unobtrusive.js进行验证,则应记住您必须在请求中注册任何DOM元素的任何验证属性.因此,您可以使用此代码:

$.validator.unobtrusive.parse('your main element on layout');

注册所有验证属性.您可以在(例如)上调用此方法: $(document).ajaxSuccess() or $(document).ready()注册所有这些方法,您的验证可以成功发生,而不是在cshtml文件上注册所有js文件.

Answer 8

对我来说这是大量的搜索。最终我决定使用 NuGet 而不是自己下载文件。我删除了所有涉及的脚本和脚本包，并获得了以下包（目前最新版本）

• jQuery (3.1.1)
• jQuery 验证 (1.15.1)
• Microsoft jQuery Ubobtrusive Ajax (3.2.3)
• Microsoft jQuery 不显眼的验证 (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 => model.StartDate)）
• 配置 （）
• 添加到捆绑包中的文件的顺序（如上所述）