2011-03-29 81 views
9

如何將動態添加的控件添加到驗證中?驗證動態添加的控件

<div class="editor-field"> 
    @*@Html.EditorFor(model => model.Middlename)*@ 
    <div id="x"></div> 

    <script type="text/javascript"> 

     $(function() { 

      var newTextBoxDiv = $(document.createElement()); 

      newTextBoxDiv.html('<input type="text" name="Middlename" id="Middlename" width="100" data-val="true" data-val-required="The Middleneim field is required." />'); 

      newTextBoxDiv.appendTo('#x'); 
     }); 

    </script> 

    @Html.ValidationMessageFor(model => model.Middlename) 
</div> 

我注意到,當我不使用現成的功能,即

<script type="text/javascript"> 


var newTextBoxDiv = $(document.createElement()); 

newTextBoxDiv.html('<input type="text" name="Middlename" id="Middlename" width="100" data-val="true" data-val-required="The Middleneim field is required." />'); 

newTextBoxDiv.appendTo('#x'); 
</script> 

,客戶端驗證踢項。有沒有辦法將延期創建的輸入明確包含到驗證中?

+0

你想顯示在頁面的頂部有關錯誤的信息?如果是這樣,那麼你可以得到MiddleName值並驗證它。如果它不是有效的輸入,那麼添加ModelState.AddModelError(「」,「」); – AEMLoviji 2011-03-29 06:23:31

+0

頁面頂部沒有錯誤,我使用的是ASP.NET MVC 3.默認是客戶端驗證。我想知道,當我沒有使用jQuery的就緒函數時,一切都是正常的,即動態添加的輸入與設計時添加的輸入沒有區別,它(動態添加的)也被驗證(當用戶輸入時)如果它是必需的或不是 – 2011-03-29 06:26:50

回答

0

通過將值推入「驗證器」的「window.mvcClientValidationMetadata」數組中,將其添加到MVC客戶端驗證在技術上是可行的。有一篇相當不錯的文章here,其中顯示了一些涉及的腳本和技術。這不會幫助你進行服務器端驗證,但是因爲客戶端不會在沒有JavaScript的情況下得到這個輸入,所以你減輕了這一點。

我通常會對此應用更標準的漸進增強模式。默認創建中間名輸入,並實現標準的MVC驗證器。然後使用jQuery來隱藏它,除非(或直到)需要。當然這可能不符合你的要求,但如果是這樣,那麼我認爲這是一個更好的方法。

1

UPDATE:這個答案是,如果你使用jQuery的不顯眼的驗證,你沒有寫你使用什麼。

首先,這個插件添加到jQuery的準備: http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

記住,你必須添加表單標籤內的元素。讓我們說你的標籤有一些包裝,我稱之爲「元素」。

後您的元素追加到DOM,稱之爲:

$.validator.unobtrusive.parseDynamicContent($(element).find("form").selector); 
var form = $(element).find("form"); 
$(form).valid(); 
    $(form).find("input").each(function() { 
     $(this).blur(function() { 
      $(this).valid(); 
     }); 
    }); 
    $(form).find("select").each(function() { 
     $(this).change(function() { 
      $(this).valid(); 
     });