and*_*ewe 1 asp.net-mvc jquery
我正在尝试在一个简单的MVC 4应用程序上使用jQuery验证插件 - 我在MVC 3中做的没有任何问题,但我无法让它工作.
我希望验证在以下情况下触发:
1 - 我的控制失去焦点.
2-表格提交.
关于我错过的任何想法将不胜感激!
_Layout.cshtml中的脚本引用
<!-- language-all: lang-html -->
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - AWC Web Console</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
</head>
在Doc ready函数中应用验证JS的Index.cshtml标记
<script type="text/javascript">
$(document).ready(function () {
alert("doc ready");
// JQuery client validation
$("#prodIdFilterForm").validate(
{
onsubmit: true,
rules: {
productId_str: {required: true, minlength: 10, number:true }
},
messages: { productId_str: "product Id must be entered" },
// Force validation when control looses focus
onfocusout: function (element) {
alert("onfocusout"); // not entering this block !
$("#productId_str").removeAttr('style');
$("#productId_str").valid(); // fire validation
$(element).valid();
}
,
showErrors: function (errorMap, errorList)
{
if (errorList.length > 0)
{
for (var i = 0; i < errorList.length; i++)
{
$("#" + errorList[i].element.id).css({ 'background-color': '#FFDFDF' });
}
}
}
}
);
}); // DocReady
</script>
形式标记的正文
@{
ViewBag.Title = "Messages";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using ( Html.BeginForm("SelectProduct", "WMSMessages", Model, FormMethod.Post, new { @id = "prodIdFilterForm"} ) )
{
<fieldset class="filtering">
<legend>SelectExtensions Product</legend>
<div>
<b>Product Id:</b>
@Html.TextBoxFor(model => model.productId_str, new { @id ="productId_str"} )
<div class="filterSubmitBox">
<input type="submit" value="Show Messages" />
</div>
</div>
</fieldset>
}
对于客户端validataion,microsoft使用jquery.validate.unobtrusive.js文件. 客户端验证asp.net mvc
启用客户端验证
要在ASP.NET MVC 3中启用客户端验证,必须设置两个标志,并且必须包含三个JavaScript文件.
打开应用程序的Web.config文件.验证应用程序设置中的ClientValidationEnabled和UnobtrusiveJavaScriptEnabled是否设置为true.根Web.config文件中的以下片段显示正确的设置:
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
将UnobtrusiveJavaScriptEnabled设置为true可以实现不显眼的Ajax和不显眼的客户端验证.使用不显眼的验证时,验证规则将转换为HTML5属性.HTML5属性名称只能由小写字母,数字和短划线组成
例如,如果您说电子邮件的必要属性及其错误消息.它会将数据属性附加到这样的元素.
<input data-val="true"
data-val-required="Email is required (we promise not to spam you!)."
id="Email" name="Email" type="text" value="" />
将ClientValidationEnabled设置为true可启用客户端验证.通过在应用程序Web.config文件中设置这些键,可以为整个应用程序启用客户端验证和不显眼的JavaScript.您还可以使用以下代码在单个视图或控制器方法中启用或禁用这些设置:
了解更多信息:
| 归档时间： |
|
| 查看次数： |
30029 次 |
| 最近记录： |