MVC4中不显眼的客户端验证无法正常工作
[英]Unobtrusive Client side validation in MVC4 not working
原文
2013-05-21 19:35:37
8
6
jquery/
asp.net-mvc/
jquery-validate/
unobtrusive-validation/
client-side-validation
问题描述
我有所有脚本的布局页面，如下所示。
<!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>
然后我有我的注册表格，如图所示
@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>
我的帐户模型类如下：
public class Account
{
public Name name {get; set;}
public Address Address1 {get; set;}
public Address Address2 {get; set;}
public Phone Phone1 {get;set;}
}
其中每个Property也是一个带有自己的EditorTemplates的模型类
public class Name
{
[Required]
public string FirstName {get; set;}
public string MiddleName {get; set;}
[Required]
public string LastName {get; set;}
}
并具有Name.cshtml EditorTemplate如下
<div >
@Html.TextBoxFor(m=>m.FirstName);
@Html.TextBoxFor(m=>m.MiddleName);
@Html.TextBoxFor(m=>m.LastName);
<div>
类似于Address.cshtml和Phone.cshtml
在web.config中： -
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
单击空表单上的注册按钮，它会执行ajax post to Register [HttpPost] Controller方法。 为什么它不给我客户端验证消息我认为它叫做Unobtrusive验证？ 我也没有在控制台中看到任何错误。
6 个解决方案
解决方案1
20 已采纳 2013-05-21 20:21:43
提交按钮必须是“submit”类型才能触发jquery验证验证，无论是单独使用jquery插件还是使用不显眼的插件。
所以这会触发验证：
<input type="submit" value="Register" id="btn1" />
但是，由于您已经编写了一些代码来处理按钮单击，因此可能更容易手动触发验证
$("#btn1").click(function (e) {
e.preventDefault();
// now trigger the form validation, result is 1 or 0
var result = $('form').valid();
$.ajax(
// details omitted
);
});
解决方案2
3 2013-05-21 19:45:47
我认为你需要重新排序脚本引用
<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>
解决方案3
0 2014-04-03 03:40:04
如果您正在使用_Layout.cshtml删除以下参考
@Scripts.Render("~/bundles/jquery")
在底部
这对我有用！
解决方案4
0 2015-02-09 10:03:43
我也有类似的问题，需要几周的时间来调试。 我在使用aspx页面。
根本原因是Html.BeginForm语句放在<table>标记之后 。
<table>
<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
</table>
这导致<form>标记在任何<input>标记之前关闭，因此不显眼的客户端验证不起作用。
<form action="/Admin/ContainerManagement" method="post" novalidate="novalidate"></form> <tr> <td><input></td> </tr>
所以，记得在 <table>标签之前放置Html.BeginForm
<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
<table>...</table>
<% } %>
解决方案5
0 2015-10-29 13:08:32
我遇到了同样的问题，发现如果我在库调用validate函数之前调用'element.valid（）'，那么它将不再验证我的表单。 我通过创建一个扩展来解决这个问题，该扩展程序验证表单是否已被处理，只是验证元素是否有效
$.fn.revalidate = function () {
if (this.length) {
var validator = this.closest("form").data("validator");
if (validator)
validator.element(this);
}
return this;
};
解决方案6
-1 2013-05-21 20:06:37
您还需要添加错误消息
@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)
MVC4：jQuery验证Unobtrusive Native工作不正确
[英]MVC4: jQuery Validation Unobtrusive Native working incorrectly
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.