Question

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

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

模型中的数据注释如下：

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

在我的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>

        }

最后还包括脚本......

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

是的，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>

现在，请帮助我摆脱这种情况。的修改
我忘了说只有必要的才能正常工作。

Answer 1

指定属性以在Web.config（appSettings部分）中启用ClientValidation和UnobtrusiveJavaScript，而不是像这样的布局：

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

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

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

Answer 2

就您的代码而言，似乎没有任何问题。因此，我怀疑js文件存在一些问题或链接到js。

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

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

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

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

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

@{
  Layout="LayoutFilePath here";
}

新更新：将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>

Answer 3

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

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：为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：在视图中使用

@model Project.Models.PasswordChangeObjectMetaData

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

3 个答案: