ASP.Net MVC DataAnnotation客户端验证不触发

Question might seem lengthy, but i have tried to cover all aspects.
I am stuck on this issue for more than a couple of days and i don't know why but my DataAnnotations are not working on client side even though the code is generated for them and ModelState.isValid also returns false in Controller.
I have added the following lines in my _Layout file after searching on internet one by one.

问题似乎很冗长,但我试图涵盖所有方面。我坚持这个问题超过两天我不知道为什么,但我的DataAnnotations不在客户端工作,即使代码是为它们生成的,ModelState.isValid也在Controller中返回false。我逐个在互联网上搜索后,在我的_Layout文件中添加了以下行。

@Html.ValidationSummary(true)
@{
   Html.EnableClientValidation();
   Html.EnableUnobtrusiveJavaScript();
}

And data annotations in Model are like:

模型中的数据注释如下:

public class PasswordChangeObject
{
    [Required(ErrorMessage = "Password is required")]
    //[StringLength(255, ErrorMessage = "Must be between 5 and 255 characters", MinimumLength = 5)]
    [DataType(DataType.Password)]
    public String oldPassword { get; set; }

    [Required(ErrorMessage = "New Password is required")]
    [StringLength(255, ErrorMessage = "Must be between 5 and 255 characters", MinimumLength = 5)]
    [DataType(DataType.Password)]
    public String newPassword { get; set; }

    [Required(ErrorMessage = "Confirming New Password is required")]
    [StringLength(255, ErrorMessage = "Must be between 5 and 255 characters", MinimumLength = 5)]
    [DataType(DataType.Password)]
    [Compare("newPassword", ErrorMessage="Passwords do not Match!")]
    public String confirmPassword { get; set; }
}

And in my cshtml file i have fileds like this:

在我的cshtml文件中,我有这样的文件:

@using (Html.BeginForm("ChangePassword", "ChangePass", FormMethod.Post, new { id = "chanegPassForm" }))
        {
            <div class="row">
                <div class="col-sm-4">
                    @*<input type="password" class="form-control" name="username" placeholder="Old Password" required>*@
                    @Html.TextBoxFor(vm => vm.oldPassword, new { @class = "form-control", @placeholder = "Old Password", @type = "password", @required = "true" })
                    @Html.ValidationMessageFor(vm => vm.oldPassword)
                </div>
            </div>
                <span class="help-block">Old Password</span>

                <div class="row">
                    <div class="col-sm-4">
                        @*<input type="password" class="form-control" name="username" placeholder="New Password" required>*@
                        @Html.TextBoxFor(vm => vm.newPassword, new { @class = "form-control", @placeholder = "New Password", @type = "password", @required = "true" })
                        @Html.ValidationMessageFor(vm => vm.newPassword)
                    </div>
                </div>
                <span class="help-block">New Password</span>

                <div class="row">
                    <div class="col-sm-4">
                        @*<input type="password" class="form-control" name="username" placeholder="Re-Type New Password" required>*@
                        @Html.TextBoxFor(vm => vm.confirmPassword, new { @class = "form-control", @placeholder = "Re-Type New Password", @type = "password", @required = "true" })
                        @Html.ValidationMessageFor(vm => vm.confirmPassword)
                    </div>
                </div>
                <span class="help-block">Re-Type New Password</span>
                <button id="changePasswordSubmitbtn" class="btn btn-default btn-primary" style="padding-top: 5px;" type="submit">Change Password</button>

        }

And finally the Scripts are included too...

最后,脚本也包括在内......

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/Custom/headroom.min.js"></script>
<script src="~/Scripts/Custom/jQuery.headroom.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

And yes, Html is being generated like:

是的,Html的生成方式如下:

<form action="/User/ChangePass/ChangePassword" id="chanegPassForm" method="post">                <div class="row">
                <div class="col-sm-4">

                    <input class="form-control" data-val="true" data-val-required="Password is required" id="oldPassword" name="oldPassword" placeholder="Old Password" required="true" type="password" value="" />
                    <span class="field-validation-valid" data-valmsg-for="oldPassword" data-valmsg-replace="true"></span>
                </div>
            </div>
                <span class="help-block">Old Password</span>
                <div class="row">
                    <div class="col-sm-4">

                        <input class="form-control" data-val="true" data-val-length="Must be between 5 and 255 characters" data-val-length-max="255" data-val-length-min="5" data-val-required="New Password is required" id="newPassword" name="newPassword" placeholder="New Password" required="true" type="password" value="" />
                        <span class="field-validation-valid" data-valmsg-for="newPassword" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <span class="help-block">New Password</span>
                <div class="row">
                    <div class="col-sm-4">

                        <input class="form-control" data-val="true" data-val-equalto="Passwords do not Match!" data-val-equalto-other="*.newPassword" data-val-length="Must be between 5 and 255 characters" data-val-length-max="255" data-val-length-min="5" data-val-required="Confirming New Password is required" id="confirmPassword" name="confirmPassword" placeholder="Re-Type New Password" required="true" type="password" value="" />
                        <span class="field-validation-valid" data-valmsg-for="confirmPassword" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <span class="help-block">Re-Type New Password</span>
                <button id="changePasswordSubmitbtn" class="btn btn-default btn-primary" style="padding-top: 5px;" type="submit">Change Password</button>
</form>

Now, please help me out of this situation. EDIT
I forgot to tell that only required is working nothing else.

现在,请帮助我摆脱这种情况。编辑我忘了说只有必要的工作没有别的。

3 个解决方案

#1

Specify the properties to enable ClientValidation and UnobtrusiveJavaScript in your Web.config (appSettings section) instead of layout like this:

指定属性以在Web.config(appSettings部分)中启用ClientValidation和UnobtrusiveJavaScript,而不是像这样的布局:

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

I tried in my own project to remove these lines in web.config and enable them with HTML helpers in layout view like you.

我尝试在我自己的项目中删除web.config中的这些行,并在布局视图中使用HTML帮助程序启用它们。

Maybe there is specific place where these helpers should be used. Maybe something is not loaded yet and validation is not enabled correctly.

也许有特定的地方应该使用这些助手。可能还没有加载某些内容并且未正确启用验证。

#2

There is nothing wrong with your code, as far as it seems. So, i suspect that there is some problem with the js file or link to the js.

就目前而言,您的代码没有任何问题。所以,我怀疑js文件或链接到js有一些问题。

First of all, @required="true" is not necessary since the unobstructive validation in client side will do that for you. And I suspect that none of the client side validation works. You claim that only required attribute work for client side validation because you included @required="true". In fact, that is not part of microsoft unobstructive validation, rather it is html form validation.

首先,@ required =“true”是没有必要的,因为客户端的无阻碍验证将为您做到这一点。我怀疑客户端验证都不起作用。您声称只有必需属性才能用于客户端验证,因为您包含@ required =“true”。事实上,这不是微软无阻碍验证的一部分,而是html表单验证。

My advice for you is to inspect the element and ensure that jquery.validate.min.js and jquery.validate.unobtrusive.js is included and the link is valid in your browser and at the same time check if there is any error in the console in web browser.

我的建议是检查元素并确保包含jquery.validate.min.js和jquery.validate.unobtrusive.js,并且链接在浏览器中有效,同时检查是否有任何错误。 Web浏览器中的控制台。

If it is valid link, try to remove both headroom.js from the link and refresh the page again.

如果它是有效链接,请尝试从链接中删除headroom.js并再次刷新页面。

If the above do not work, kindly reinstall nuget package for Microsoft JQuery Unobstructive validation.

如果上述方法无效,请重新安装nuget包以进行Microsoft JQuery Unobstructive验证。

Last but not least, I hope that you do Include this piece of code in your view page should you include the above script in your _Layout.cshtml but not in your view page itself.

最后但并非最不重要的是,如果您在_Layout.cshtml中包含上述脚本但未在视图页面中包含上述脚本,我希望您在视图页面中包含此段代码。

@{
  Layout="LayoutFilePath here";
}

New update: Replace the jquery.validate and jquery.validate.unobstrusive js to this two link. Change 5.0 to 4.0 if your are using MVC 4

新更新:将jquery.validate和jquery.validate.unobstrusive js替换为这两个链接。如果您使用的是MVC 4,请将5.0更改为4.0

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.js"></script>

#3

Try using this approach if you are using Entity Framework. Otherwise just include required namespace on top of your class.

如果您使用的是Entity Framework,请尝试使用此方法。否则只需在您的类顶部包含必需的命名空间。

1: Create partial metadate class of PasswordChangeObject i.e

1:创建PasswordChangeObject的部分元数据类,即

public partial class PasswordChangeObjectMetaData
{

[Required(ErrorMessage = "Password is required")]
//[StringLength(255, ErrorMessage = "Must be between 5 and 255 characters", MinimumLength = 5)]
[DataType(DataType.Password)]
public String oldPassword { get; set; }

[Required(ErrorMessage = "New Password is required")]
[StringLength(255, ErrorMessage = "Must be between 5 and 255 characters", MinimumLength = 5)]
[DataType(DataType.Password)]
public String newPassword { get; set; }

[Required(ErrorMessage = "Confirming New Password is required")]
[StringLength(255, ErrorMessage = "Must be between 5 and 255 characters", MinimumLength = 5)]
[DataType(DataType.Password)]
[Compare("newPassword", ErrorMessage="Passwords do not Match!")]
public String confirmPassword { get; set; }

}

2: Create partial class for PasswordChangeObject which only includes get,set and mention its metadata class on top , and remember to include required system namespace on top i.e

2:为PasswordChangeObject创建部分类,其中只包括get,set和提及其元数据类,并记住在顶部包含所需的系统命名空间,即

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
[MetadataType(typeof(PasswordChangeObjectMetaData))]

public partial class PasswordChangeObject
  {
    public String oldPassword { get; set; }
    public String newPassword { get; set; }
    public String confirmPassword { get; set; }
  }

3: In views use

3:在视图中使用

@model Project.Models.PasswordChangeObjectMetaData

#1