1

単純なMVC4アプリケーションでjQuery検証プラグインを使用しようとしています。MVC3で問題なく実行したことですが、まったく機能しません。

次の場合に検証を実行したい：

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>

Docready関数に適用された検証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>
}
4

1 に答える 1

9

クライアント側の検証では、Microsoftはjquery.validate.unobtrusive.jsファイルを使用します。 クライアント側の検証asp.netmvc

クライアント側の検証の有効化

ASP.NET MVC 3でクライアント側の検証を有効にするには、2つのフラグを設定し、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を有効にします。次のコードを使用して、個々のビューまたはコントローラーメソッドでこれらの設定を有効または無効にすることもできます。

詳細については：

  1. Asp.netMVC検証
  2. MVCクライアント側の検証
于 2013-03-01T10:08:25.120 に答える