MVC 4客户端验证不起作用答案

【问题标题】：MVC 4 client side validation not workingMVC 4客户端验证不起作用
【发布时间】：2013-01-09 07:55:21
【问题描述】：

谁能告诉我为什么客户端验证在我的 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 派生的类。原因是我的错误消息是通过覆盖RequiredAttribute 类的FormatErrorMessage(string name) 方法来本地化的。它工作正常 - 我的标签和错误消息已本地化。

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 版本中放置了一个断点，并且它正在被命中。表单被发布到服务器端验证发生的服务器。不会发生客户端验证。

我错过了什么？

谢谢。

【问题讨论】：

您能告诉我们您是如何创建表单的吗？
我编辑了我的问题并提供了更多信息！
您是否通过在 shared/displaytemplates 文件夹中添加内容来覆盖默认模板？
不，我没有。只需使用标准模板。

标签： jquery asp.net-mvc-4 jquery-validate unobtrusive-validation

【解决方案1】：

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

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

按 Ctrl+ 为必需的导入命名空间。最后在视图中添加这个

<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>

【讨论】：

【解决方案2】：

确保您使用的是Attributes（例如RequiredAttribute），它位于System.ComponentModel.DataAnnotations 命名空间下

【讨论】：

【解决方案3】：

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

$(function () {
            $.validator.addMethod('latinos', function (value, element) {
                return this.optional(element) || /^[a-záéóóúàèìòùäëïöüñ\s]+$/i.test(value);
            });

            $("#btn").on("click", function () {
                //alert("aa");
                $("#formulario").validate({                    
                    rules:
                    {
                        email: { required: true, email: true, minlength: 8, maxlength: 80 },
                        digitos: { required: true, digits: true, minlength: 2, maxlength: 100 },
                        nombres: { required: true, latinos: true, minlength: 3, maxlength: 50 },
                        NombresUsuario: { required: true, latinos: true, minlength: 3, maxlength: 50 }
                    },
                    messages:
                    {
                        email: {
                            required: 'El campo es requerido', email: 'El formato de email es incorrecto',
                            minlength: 'El mínimo permitido es 8 caracteres', maxlength: 'El máximo permitido son 80 caracteres'
                        },
                        digitos: {
                            required: 'El campo es requerido', digits: 'Sólo se aceptan dígitos',
                            minlength: 'El mínimo permitido es 2 caracteres', maxlength: 'El máximo permitido son 10 caracteres'
                        },
                        nombres: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        },
                        NombresUsuario: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        }
                    }
                });
            });

<tr>@*<div class="form-group">     htmlAttributes: new { @class = "control-label col-md-2" }      , @class = "form-control" }*@
                <td>@Html.LabelFor(model => model.NombresUsuario )</td>

                        @*<div class="col-md-10">*@
                <td>
                    @Html.EditorFor(model => model.NombresUsuario, new { htmlAttributes = new { id = "NombresUsuario" } })
                    @Html.ValidationMessageFor(model => model.NombresUsuario, "", new { @class = "text-danger" })
                </td>

【讨论】：

【解决方案4】：

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

<appSettings>

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

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

</appSettings>

我改成现在可以工作了：

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

【讨论】：

这也对我有用，我将它添加到视图文件夹中的 web.config 中

【解决方案5】：

我想在这篇文章中补充一点，我遇到了同样的问题，但在 PartialView 中。

我需要添加

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

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

参考资料：

Data Annotations / Validation not working for partial views

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

用途：

@Html.EditorFor

代替：

@Html.TextBoxFor

【讨论】：

【解决方案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))
配置（）
添加到包中的文件的顺序（如上所述）

【讨论】：

【解决方案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>

希望能帮助别人。

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

我的错是我忘记了这一行 @Html.ValidationMessageFor(m => ...)

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

【讨论】：

【解决方案12】：

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

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

注册所有验证属性。您可以在（例如）上调用此方法： $(document).ajaxSuccess() or $(document).ready() 注册所有这些并且您的验证可以成功进行，而不是在cshtml文件上注册所有js文件。

【讨论】：

使用ajax加载表单时需要这个解决方案

【解决方案13】：

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

这段代码对我有用。

【讨论】：

【解决方案14】：

我最终通过在我的 .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 编程中发生的频率感到惊讶，即一切似乎都已到位，但事实证明需要进行一些模糊的调整才能让事情顺利进行。脆弱，脆弱，脆弱。

【讨论】：

我有部分视图，需要直接粘贴才能查看，布局中的引用似乎不起作用。
我也有部分观点。需要直接在视图中引用才能使其正常工作。

【解决方案15】：

  @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>
}

【讨论】：

【解决方案16】：

在 Global.asax.cs 中，Application_Start() 方法添加：

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

【讨论】：

这是我在使用自定义属性时所缺少的。谢谢。

【解决方案17】：

您可能已经解决了这个问题，但是我通过使用 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*"));

现在我的客户端验证正在运行。你只是想确保不显眼的文件在最后（所以它不是侵入性的，哈哈 :)

【讨论】：

按字母顺序捆绑渲染脚本。

【解决方案18】：

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

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

最终结果：

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

除了我漂亮的标准 CRUD 视图之外，一切都是 Visual Studio 项目模板的默认值。

修复问题后加载的脚本：

【讨论】：

非常棒的老男孩。我将所有脚本捆绑在一起，自然排序将不显眼的位放在 jqueryval 上方
7 年过去了，它仍然不在样板 _Layout.cshtml 文件中！永恒的建议 Liviu！

【解决方案19】：

validation data-* 属性未显示在您输入的呈现 html 中的原因可能是没有表单上下文。 FormContext 是在您使用@using(Html.BeginForm(...)) { ... } 创建表单时自动创建的。

如果您对表单使用常规 html 标记，您将无法获得客户端验证。

【讨论】：

我没有使用常规的 html 表单标签。我的表单是使用 Html.BegingForm() 助手呈现的。

【解决方案20】：

您的输入没有数据验证属性。确保您已使用 Html.TextBoxFor 等服务器端助手生成它，并且它位于表单内：

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

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

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

【讨论】：

就在第一行：@Scripts.Render("~/bundles/jquery")，但仍然值得检查 jquery 实际上是否在页面的呈现源中。

【解决方案21】：

下面的行显示您没有像 AgreementNumber 上所需的那样设置 DataAttribute

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

你需要

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

【讨论】：

我已经在我的模型属性上设置了这个 DataAnnotation 属性。我有一个派生自 RequiredAttribute 的类
我已经编辑了我的问题，提供了更多相关信息。
我从模型属性中删除了MyRequiredAttribute 注释并使用标准RequiredAttribute 来注释我的模型属性并且它有效（客户端验证有效）。当我使用MyRequiredAttribute 时，此属性未在<input> 标签中呈现：data-val-required="The Agreement number field is required."。但我需要本地化我的错误消息。如何解决？
这是一个不同的问题 - 在一个新问题中提问