Jquery MVC 4客户端验证不起作用

我想在一个简单的MVC 4应用程序上使用jQuery验证插件 - 我在MVC 3中完成了一些没有问题的工作，但是我无法工作在所有。Jquery MVC 4客户端验证不起作用

我想在下列情况下启动验证：

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>

在文件准备功能应用

<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>

身体组成标记Index.cshtml标记与验证JS

@{ 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> }

来源

2013-03-01 andrewe

顺便说一句 - 我知道docready 标记 - 我不习惯在我的帖子中格式化代码（新手！） – andrewe 2013-03-01 09:24:07

我不敢相信 - 我删除了_Layout.cshtml中引用的第三个脚本：验证开始工作 - 任何人都可以让我理解为什么？ – andrewe 2013-03-01 09:37:17

查看我的回答获取详细解释 – 2013-03-01 10:12:50

对于客户端validataion microsoft使用jquery.validate.unobtrusive.js文件。 Client side validation 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属性名称可以只包含小写字母，数字和破折号

例如，如果您声称需要电子邮件的attribue及其错误消息。它会像这样将数据属性附加到元素。

<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。

更多信息：您还可以使用下面的代码启用或禁用个人意见或控制器方法这些设置

来源

2013-03-01 10:08:25

拉维 - 感谢您的背景资料 - 安德鲁 – andrewe 2013-03-01 11:05:08

感谢您的支持！如上所述，我必须确保js文件“jquery.validate.unobtrusive.js”已加载，并且我将这两个条目添加到web.config中。 – 2016-12-21 20:34:07

Jquery MVC 4客户端验证不起作用

回答

相关问题