65

谁能告诉我为什么客户端验证在我的 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 版本中放置了一个断点,它正在被命中。表单被发布到服务器端验证发生的服务器。客户端验证不会发生。

我错过了什么?

谢谢你。

4

21 回答 21

51

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

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

最终结果:

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

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

修复问题后加载的脚本: 在此处输入图像描述

于 2013-07-01T07:18:27.737 回答
15

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

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
于 2016-01-28T09:39:23.247 回答
12

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

于 2015-08-27T17:06:14.013 回答
9

在 Global.asax.cs 中,Application_Start() 方法添加:

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MyRequiredAttribute), typeof(RequiredAttributeAdapter));
于 2013-11-24T18:28:01.897 回答
9

您可能已经解决了这个问题,但是我通过使用 App_Start 更改 BundleConfig 中 jqueryval 项的顺序来获得一些运气。即使在全新的开箱即用 MVC 4 Internet 解决方案上,客户端验证也无法正常工作。所以我改变了默认值:

            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*"));

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

于 2013-07-13T07:24:24.790 回答
7

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

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

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

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

于 2013-01-25T10:56:55.063 回答
7

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

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

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

于 2015-09-20T07:26:46.093 回答
4

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

这不适用于 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>

希望能帮助某人。

于 2016-05-24T10:09:15.613 回答
4

对我来说,这是很多搜索。最终我决定使用 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))
  • 配置 ()
  • 添加到包中的文件的顺序(如上所述)
于 2016-11-01T11:06:43.213 回答
3

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

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

于 2013-01-25T11:05:02.470 回答
3

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

<appSettings>

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

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

</appSettings>

我改为现在工作:

`<add key="UnobtrusiveJavaScriptEnabled" value="true" />`
于 2018-02-01T12:31:04.390 回答
2
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

这段代码对我有用。

于 2015-09-06T11:17:58.030 回答
2

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

[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>
于 2019-09-13T14:58:49.823 回答
2

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

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

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

于 2016-01-06T09:24:52.820 回答
1

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

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

你需要

[Required]
public String AgreementNumber{get;set;}
于 2013-01-25T11:01:33.173 回答
0

确保您使用的是Attributes(例如RequiredAttribute),它属于System.ComponentModel.DataAnnotations命名空间

于 2019-06-11T10:51:59.833 回答
0

利用:

@Html.EditorFor

代替:

@Html.TextBoxFor

于 2016-11-08T16:27:17.550 回答
0

在我的情况下,我添加了 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>
于 2018-03-15T22:29:49.777 回答
0

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

于 2017-03-30T12:17:38.510 回答
0

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

我需要添加

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

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

参考:

于 2017-04-20T15:03:13.533 回答
-2
  @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>
}
于 2015-02-26T09:11:05.403 回答