使用 MVC 4 表单的 JQuery 验证不起作用。答案

【问题标题】：JQuery validation with MVC 4 form doesn't work.使用 MVC 4 表单的 JQuery 验证不起作用。
【发布时间】：2013-09-10 15:37:50
【问题描述】：

我正在使用 MVC 4 表单，我想对我的输入进行一些验证。由于我的 MVC 强类型模型有点复杂，我想只使用 JQuery 验证方法而不使用任何 Attributes 属性。

当我运行我的页面时，我可以看到警报消息，但 IE10 告诉我： “对象不支持属性或方法‘验证’”。

此外，Chrome 也会显示警报，但是当我单击“提交”并将我的名字输入留空时，什么也没有出现，并且表单已提交。我应该在某处定义我的错误消息吗？我究竟做错了什么？谢谢！

这是我在 _Layout.cshtml 中的<head> 部分：

<head>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
</head>

这是我在 EditClient.cshtml 中的<body> 部分（使用上面的布局）：

<body>
<script src="../../Scripts/EditClient.js" type="text/javascript"></script>
@using (Html.BeginForm("EditClient", "Reviewer", FormMethod.Post, new { id = "ClientForm" }))
{
@Html.TextBoxFor(x => x.Client.Person1.FirstName)
<input type="submit" value="Submit" class="form-submit" />
}
</body>

这是我的 EditClient.js 用于表单验证：

$("document").ready(function () {

    alert('Test Alert');    //Showing OK
    $("#ClientForm").validate(); //IE10 doesn't recognize the method
    $("#Client_Person1_FirstName").rules("add", { required: true, maxlength: 20, messages: { required: "Title required", maxlength: "Must be under 20 characters"} });

});

【问题讨论】：

RequiredFieldValidator is not working properly with jQuery UI的可能重复

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

【解决方案1】：

尝试像这样定义验证规则：

$("document").ready(function () {
    $("#ClientForm").validate({
        rules: {
            'Client.Person1.FirstName':
           {
                required: true,
                maxlength: 20
            }
        },
        messages:
        {
            'Client.Person1.FirstName':
           {
                required: 'Title required',
                maxlength: 'Must be under 20 characters'
            }
        }
    });
});

【讨论】：

还是一样，是不是少了什么东西？也许是提交处理程序之类的？
不，您不需要任何提交处理程序。这应该可以工作，它与插件文档中显示的代码相同。 Chrome 控制台中是否存在一些 javascript 错误？还要确保jquery.validate.min.js 脚本存在于指定位置。查看“网络”选项卡，查看渲染视图时是否出现 404 错误。
Chrome 控制台告诉我：“Uncaught TypeError: Object [object Object] has no method 'validate'”，并且 Network Tab 显示所有链接都ok...
您确认指定位置存在jquery.validate.min.js 脚本吗？此文件似乎不存在或未正确包含。
问题已解决。在我的 _Layout.cshtml 底部有：@Scripts.Render("~/bundles/jquery")。删除它解决了我的问题。谢谢！