我正在尝试在一个简单的 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>
Index.cshtml 标记与验证 JS 应用于文档准备功能
<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>
}
