jqueryのクライアント側の検証がMVC3の部分ビューで動作しない

Question

次の部分ビューでクライアント側の検証作業ができないようです。このビューは親ビューのdivTSettings div内にあります。 stackoverflowや他のサイトからたくさんのことを試してみましたが、何も動作していないようです。何か案は？

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 


@using (Ajax.BeginForm("CreateT", "TAdmin", null, 
     new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divTSettings"}, 
         new { id = "CreateTForm" })) 
{ 
    <div> 
     <label>Name:</label> 
     <input type="text" name="tName" id="tName"/> 
     @Html.ValidationMessage("tName") 
     <input type="submit" value="Submit"/> 
    </div> 
} 

<script type="text/javascript"> 
$(function() { 
    $('#CreateTForm').validate({ 
     rules: { 
      tName: { 
       required: true 
      } 
     }, 
     messages: { 
      tName: { 
       required: 'Name required' 
      } 
     } 
    }); 
    $("#CreateTForm").removeData("validator"); 
    $("#CreateTForm").removeData("unobtrusiveValidation"); 
    $.validator.unobtrusive.parse("#CreateTForm"); 
}); 
</script> 

Answer 1

任意のアイデア？

はい、最初に行うべきことは、これらのすべての部分を部分ビューから取り除くことです。部分的なビューにはスクリプトを含めないでください。部分的なビューにはマークアップのみを含める必要があります。私はこれを何度も繰り返してきましたが、そこにスクリプトを入れている人々がいます。スクリプトはレイアウト内に登録するか、レイアウトに登録されたスクリプトセクションをオーバーライドするなどして、部分的にレンダリングしたメインビューに登録する必要があります。</body>タグの直前にすべてのスクリプトをHTMLドキュメントの最後に挿入します。それが彼らの所属です。

これは実際の問題です：DOMに動的に追加された要素を使って控えめな検証が行われることはありません。たとえば、AJAX要求をサーバーに送信して部分的なビューを返したり、この部分ビューはDOMに注入されます。

これを機能させるには、新しく追加された要素を邪魔にならない検証フレームワークで登録する必要があります。これを行うには、新しく追加された要素に$.validator.unobtrusive.parseを呼び出す必要があります：

$("form").removeData("validator"); 
$("form").removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse("form"); 

はあなたがあなたのDOMに部分的に注入されたAJAXの成功ハンドラ内にこのコードを配置する必要があります。新しい要素を挿入したら、単にこの関数を呼び出します。

jQuery（$ .ajax、$。post ...）でAJAXリクエストを手作業で書くのではなく、Ajax.BeginFormとAjax.ActionLinkヘルパーがあなたの仕事をしている場合は、 OnSuccessコールバックをAjaxOptionsに登録してこのコードをそこに入れる必要があります。

Answer 2

グローバルレベルで修正したい場合は、これが役立ちます。 _layout.cstmlで使用しました。

$(document).ajaxStart(function() { 
       $.ajaxSetup({ 
        converters: { 
         "text html": function (textValue) { 
          if (textValue) { 
           // Some parsing logic here 
           var script = "<script type='text/javascript' language='javascript' > $.validator.unobtrusive.parse(\"form\");"; 
           var scriptend = "\<\/script>"; 
           return script + scriptend + " " + textValue; 
          } else { 
           // This will notify a parsererror for current request 
           throw exceptionObject; 
          } 
         } 
        } 
       }); 
      });