jQuery MVC4 中不显眼的客户端验证不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16678079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unobtrusive Client side validation in MVC4 not working
提问by user2232861
I have layout page with all scripts as shown below.
我有所有脚本的布局页面，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Site</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<some custom css>
<modernizr>
<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
<script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
<script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
<some custom scripts>
<bootstrap scripts>
<knockout scripts>
</head>
<body>
@RenderBody()
</body>
</html>
Then I have my registration Form as shown
然后我有我的注册表，如图所示
@model Mysite.Models.Account.Account
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" }))
{
@Html.AntiForgeryToken();
<h1>Login</h1>
@Html.ValidationSummary();
@Html.EditorFor(m => m.Name)
@Html.EditorFor(m => m.Address1)
@Html.EditorFor(m => m.Address2)
@Html.EditorFor(m => m.Phone1)
<input type="button" value="Register" id="btn1" />
}
<script>
var form = $("#register");
$("#btn1").click(function (e) {
e.preventDefault();
$.ajax({
url: 'http://localhost:3885/Account/Register',
data: form.serialize(),
type: 'POST',
success: function (result) {},
error: function (req, status, error) {
function(req, status, error);
}
});
});
</script>
My Account Model class is as follow :
我的帐户模型类如下：
public class Account
{
public Name name {get; set;}
public Address Address1 {get; set;}
public Address Address2 {get; set;}
public Phone Phone1 {get;set;}
}
where each Property is also a model class with its own EditorTemplates for example
例如，每个 Property 也是一个具有自己的 EditorTemplates 的模型类
public class Name
{
[Required]
public string FirstName {get; set;}
public string MiddleName {get; set;}
[Required]
public string LastName {get; set;}
}
and have Name.cshtml EditorTemplate as below
并有 Name.cshtml EditorTemplate 如下
<div >
@Html.TextBoxFor(m=>m.FirstName);
@Html.TextBoxFor(m=>m.MiddleName);
@Html.TextBoxFor(m=>m.LastName);
<div>
similarly for Address.cshtml and Phone.cshtml
Address.cshtml 和 Phone.cshtml 类似
in web.config: -
在 web.config 中： -
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
On clicking Register button on empty form it does ajax post to Register [HttpPost] Controller method. Why does it not give me client side validation messages i think its called Unobtrusive validation ? I don't see any errors in console as well.
单击空表单上的注册按钮时，它会将 ajax 发布到注册 [HttpPost] 控制器方法。为什么它不给我客户端验证消息，我认为它称为 Unobtrusive 验证？我也没有在控制台中看到任何错误。
回答by Dr Blowhard
The submit button must be of type 'submit' to trigger the jquery validate validation, whether using the jquery plugin on its own or with the unobtrusive plugin.
提交按钮必须是“提交”类型以触发 jquery 验证验证，无论是单独使用 jquery 插件还是与不显眼的插件一起使用。
So this would trigger the validation:
所以这将触发验证：
<input type="submit" value="Register" id="btn1" />
But seeing as you have already have written some code to handle the button click, it might be easier to just manually trigger the validation
但是看到您已经编写了一些代码来处理按钮点击，手动触发验证可能会更容易
$("#btn1").click(function (e) {
e.preventDefault();
// now trigger the form validation, result is 1 or 0
var result = $('form').valid();
$.ajax(
// details omitted
);
});
回答by Khaled Musaied
I think you need to reorder the scripts references
我认为您需要重新排序脚本引用
<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
<script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
回答by jcmordan
if your are using the _Layout.cshtml remove the follow reference
如果您使用的是 _Layout.cshtml，请删除以下引用
@Scripts.Render("~/bundles/jquery")
on the bottom
在底部
that work for me!
这对我有用！
回答by erwin huang
I also had similar problem that required a few weeks to debug. I was using aspx page.
我也有类似的问题，需要几个星期来调试。我正在使用 aspx 页面。
The root cause was that Html.BeginFormstatement was placed after a <table>tag.
根本原因是该Html.BeginForm语句放置在<table>标签之后。
<table>
<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
</table>
This caused the <form>tag to close before any <input>tag, and thus the unobtrusive client validation not working.
这导致<form>标记在任何<input>标记之前关闭，因此不显眼的客户端验证不起作用。
<form action="/Admin/ContainerManagement" method="post" novalidate="novalidate"></form>
<tr>
<td><input></td>
</tr>
<form action="/Admin/ContainerManagement" method="post" novalidate="novalidate"></form>
<tr>
<td><input></td>
</tr>
So, remember to put Html.BeginFormbefore<table>tag
所以，记得放在标签Html.BeginForm之前<table>
<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
<table>...</table>
<% } %>
回答by emanuel.virca
I had the same problem and found that if I call 'element.valid()' before library's call to validate function happend, than it will no longer validate my form. I solved this by creating an extension that verifies if the form has been processed and only than verify if the element is valid
我遇到了同样的问题，发现如果在库调用验证函数之前调用 'element.valid()'，它将不再验证我的表单。我通过创建一个扩展来解决这个问题，该扩展验证表单是否已被处理，并且仅验证元素是否有效
$.fn.revalidate = function () {
if (this.length) {
var validator = this.closest("form").data("validator");
if (validator)
validator.element(this);
}
return this;
};
回答by Khaled Musaied
You need also to add the error messages
您还需要添加错误消息
@Html.EditorFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name)
@Html.EditorFor(m => m.Address1)
@Html.ValidationMessageFor(m => m.Address1)
@Html.EditorFor(m => m.Address2)
@Html.ValidationMessageFor(m => m.Address2)
@Html.EditorFor(m => m.Phone1)
@Html.ValidationMessageFor(m => m.Phone1)
