Question

我正在尝试在一个简单的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>
}

Answer 1

对于客户端validataion，microsoft使用jquery.validate.unobtrusive.js文件。 Client side validation asp.net mvc

启用客户端验证

要在ASP.NET MVC 3中启用客户端验证，必须设置两个   标志，您必须包含三个JavaScript文件。

打开应用程序的Web.config文件。验证   ClientValidationEnabled和UnobtrusiveJavaScriptEnabled设置为   在应用程序设置中为true。来自root的以下片段   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。您还可以使用以下代码在单个视图或控制器方法中启用或禁用这些设置：

了解更多信息：

Jquery MVC 4客户端验证无效

1 个答案: