C# asp.net mvc客户端验证不起作用?
出于某种原因,我的客户端验证似乎不起作用: 这是我的html:C# asp.net mvc客户端验证不起作用?,c#,asp.net,asp.net-mvc,jquery-validate,unobtrusive-validation,C#,Asp.net,Asp.net Mvc,Jquery Validate,Unobtrusive Validation,出于某种原因,我的客户端验证似乎不起作用: 这是我的html: @using (Html.BeginForm("Create", "Home", FormMethod.Post)) { <hr /> @Html.ValidationSummary(true) <hr /> <p> <label>Select Client_ID: </label> <span class="field">
@using (Html.BeginForm("Create", "Home", FormMethod.Post))
{
<hr />
@Html.ValidationSummary(true)
<hr />
<p>
<label>Select Client_ID: </label>
<span class="field">
<select name="clientId" id="clientId">
@foreach (var item in Model.ClientId)
{
<option value="@item">@item</option>
}
</select>
</span>
</p>
<p>
<label>@Html.LabelFor(model => model.UserModel.name)</label>
<span class="field">
@Html.EditorFor(model => model.UserModel.name)
</span>
@Html.ValidationMessageFor(model => model.UserModel.name)
</p>
<p>
<label>@Html.LabelFor(model => model.UserModel.password)</label>
<span class="field">
@*<input name="password" id="password" type="password" />*@
@Html.EditorFor(model => model.UserModel.password)
</span>
@Html.ValidationMessageFor(model => model.UserModel.password)
</p>
<p>
<label>@Html.LabelFor(model => model.UserModel.email)</label>
<span class="field">
@*<input name="email" id="email" type="email" />*@
@Html.EditorFor(model => model.UserModel.email)
</span>
@Html.ValidationMessageFor(model => model.UserModel.email)
</p>
<p>
<label>Select: </label>
<span class="field">
<select name="accessLevel" id="accessLevel">
<option value="3">Company</option>
<option value="5">End-User</option>
</select>
</span>
</p>
<input type="submit" value="Submit" />
我在webconfig中启用了客户端:
<appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
{EDIT}添加了呈现的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<script src="/Scripts/jquery.validate.js"></script>
<div class="jumbotron">
<h1>Add Users to the website</h1>
</div>
<form action="/Home/Create" method="post"> <hr />
<hr />
<p>
<label for="UserModel_name">Name</label>
<span class="field">
<input type="text" name="name" />
</span>
<span class="field-validation-valid" data-valmsg-for="UserModel.name" data-valmsg-replace="true"></span>
</p>
<p>
<label for="UserModel_password">Password</label>
<span class="field">
<input name="password" id="password" type="password" />
</span>
<span class="field-validation-valid" data-valmsg-for="UserModel.password" data-valmsg-replace="true"></span>
</p>
<p>
<label for="UserModel_email">Email Address</label>
<span class="field">
<input name="email" id="email" type="email" />
</span>
<span class="field-validation-valid" data-valmsg-for="UserModel.email" data-valmsg-replace="true"></span>
</p>
<p>
<label>Select: </label>
<span class="field">
<select name="accessLevel" id="accessLevel">
<option value="3">Company</option>
<option value="5">End-User</option>
</select>
</span>
</p>
<input type="submit" value="Submit" />
</form>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-2.1.0.js"></script>
<script src="/Scripts/bootstrap.js"></script>
主页-我的ASP.NET应用程序
向网站添加用户
名称
密码
电子邮件地址
选择:
单位
最终用户
&抄袭;2014年-我的ASP.NET应用程序
您的问题可能是jQuery位于文件的底部,而jQuery.validate位于顶部。jQuery必须在jQuery.validate之前。我建议总是将jQuery放在标题中,而不是正文中,这应该是Modernizer之后的第一件事
另外,您也知道jQuery 2.x不适用于IE8或更早版本,对吧?由于某些原因,Html帮助程序在输入中没有生成验证属性(data val=“true”和其他),请检查。除了检查javascript库的加载顺序外:
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.validation.js"></script>
<script src="~/Scripts/jquery.validation.unobtrusive.js"></script>
使用:
而不是:
<input>
当然,您需要
jquery.validate.*
脚本您的jquery.validate.js似乎处于错误的位置。它必须在主jquery ref之后
对于MVC 5,应如下所示:
\u Layout.cshtml:(页面底部)
尝试以下操作:验证失败,因为您已在页面底部硬编码此JQuery链接版本,该版本可能已更新到脚本文件夹中的较新版本:
<script src="/Scripts/jquery-2.1.0.js"></script>
您所需要做的就是转到“脚本”,看看是否有“jquery-2.1.0.js”文件,或者您是否将jquery更新到了新版本。键入较新版本的文件名(如果找到),然后重新测试。现在应该可以了。截至2017年6月,我们使用的是JQuery版本3.1.1
这件事发生在我身上,我一直在努力,直到我意识到我已经更新了JQuery,并看到它删除了旧版本。我打赌这是你的问题。如果您不这样做,我建议您不要遵循在视图页面中粘贴验证脚本的视图页面模板,而是创建一个简单的usercontrol或masterpage或layout视图页面,并在其中填充JQuery链接,以便所有项目页面都能共享它们。浏览器第一次自然会缓存这些页面,因此即使这些页面没有在其他页面上使用,也不会再次加载。不确定是否动态加载这些页面(例如,使用Ajax加载部分视图)。如果是这样的话,那么你需要在成功的时候用验证器解析html。 使用类似于
$.validator.unobtrusive.parse(".target");
例如
您是否在捆绑包中加载了正确的js文件?是的,应该是这样。您能否在视图/布局中显示加载js文件的顺序当您说“不工作”时,您能否更具体一些?只有一些字段不起作用吗?他们都不工作吗?它是特定的验证吗?(即,做必需的工作,但其他人不做?)什么都不起作用。当我打开页面时,没有显示任何验证错误,ir此字段是必需的。我可以在任何地方键入任何内容,然后单击submit。正如@Charlie回答的那样,我想这是应该遵循的顺序,如果我将任何其他脚本文件放在
jquery.js
和jquery.validate.js
之间,那么客户端验证就不起作用了。如果使用CDN,有时会发生这种情况,请检查。希望帮助某人。
<body>
...
...
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval") <!-- *required for client side validation! -->
@RenderSection("scripts", required: false)
</body>
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
<script src="/Scripts/jquery-2.1.0.js"></script>
$.validator.unobtrusive.parse(".target");
function loadAPartialView(endPoint) {
$.ajax({
url: endPoint,
type: 'GET',
cache: false,
success: function (result) {
$('.target').html(result);
$('.target').show();
// IMPORTANT. Next line is required to get the client side validation to run.
$.validator.unobtrusive.parse(".target");
$(".loadingMessage").hide();
},
error: function (result) {
// Error message...
$(".loadingMessage").hide();
}
});
};