不顯眼的jQuery驗證javascript創建的元素MVC3

我有一個由mvc3 scaffolding創建的註冊表單。不顯眼的jQuery驗證javascript創建的元素MVC3

例如

<div class="editor-label"> 
    @Html.LabelFor(model => model.Email) 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.Email) 
    @Html.ValidationMessageFor(model => model.Email) 
</div>

等等。

我有一個下拉列表，用戶可以選擇他是一個人還是一個公司。如果選擇了某個人，那麼該頁面會載入該人的屬性，例如birthdate，但如果他/她選擇了「company」選項，則會將表單的一部分（使用jquery .detach（）.attach（））轉換爲形式（所以值不張貼在提交）

這正常工作與我的自定義驗證和外面的ViewModels隱藏DIV，唯一的問題是，有在剛接通的元素沒有jQuery驗證。

我想使用不顯眼的jquery驗證，但是如何手動將處理程序附加到新的表單元素（或者重新驗證整個dom以進行驗證）？

編輯：檢查我這篇文章後：http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

我試圖更新我的代碼。我已經包含了那裏描述的JavaScript，並試圖重新分析表單的新插入部分。當它沒有任何區別時，我切換到.remove（）和.html（）我的代碼並插入裸露的html，但它沒有任何幫助。繼承人我的腳本：

<script> 
     $(document).ready(function() { 
      var secretholder = $('#secret_from_holder'); 
      var visibleholder = $('#type_data_holder'); 
      var select = $('select#TypeValueID'); 
      select.change(function() { 
       var value = $('select#TypeValueID option:selected').val(); 
       switch (value) { 
        case '1': 
         var tohide = visibleholder.html(); 
         visibleholder.children().remove(); 
         var toshow = secretholder.html(); 
         secretholder.children().remove(); 

         secretholder.append(tohide); 
         visibleholder.append(toshow); 

         $.validator.unobtrusive.parseDynamicContent('div.firm'); 
         break; 
        case '2': 
         var tohide = visibleholder.html(); 
         visibleholder.children().remove(); 
         var toshow = secretholder.html(); 
         secretholder.children().remove(); 

         secretholder.append(tohide); 
         visibleholder.append(toshow); 

         $.validator.unobtrusive.parseDynamicContent('div.person'); 
         break; 
       } 
      }); 
     }); 
    </script>

我的繼承人，我在切換形式外隱藏的部分：

<div id="secret_from_holder" style="display: none"> 
    @if (Model.TypeValueID == Constants.Crm.Customer.Types.FIRM_VALUE_ID) 
    { 
     <div class="person"> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.Person.Name) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Person.Name) 
       @Html.ValidationMessageFor(model => model.Person.Name) 
      </div> 
      <div class="clear"></div> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.Person.BirthDate) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Person.BirthDate) 
       @Html.ValidationMessageFor(model => model.Person.BirthDate) 
      </div> 
      <div class="clear"></div> 
     </div> 
    } 
    else 
    { 
     <div class="firm"> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.Firm.Name) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Firm.Name) 
       @Html.ValidationMessageFor(model => model.Firm.Name) 
      </div> 
      <div class="clear"></div> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.Firm.BankAccountNumber) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Firm.BankAccountNumber) 
       @Html.ValidationMessageFor(model => model.Firm.BankAccountNumber) 
      </div> 
      <div class="clear"></div> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.Firm.Tax) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Firm.Tax) 
       @Html.ValidationMessageFor(model => model.Firm.Tax) 
      </div> 
      <div class="clear"></div> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.Firm.EuTax) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Firm.EuTax) 
       @Html.ValidationMessageFor(model => model.Firm.EuTax) 
      </div> 
      <div class="clear"></div> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.Firm.TradeNumber) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Firm.TradeNumber) 
       @Html.ValidationMessageFor(model => model.Firm.TradeNumber) 
      </div> 
      <div class="clear"></div> 
     </div>     
    } 
    </div>

我真的堅持在這裏，請大家幫忙。

自動解析（上頁面加載）的部分總是驗證（即使接通了，然後再返回），但部分我試圖解析手動從未驗證

來源

2011-07-14 SoonDead

你才能與客戶端驗證註冊它需要parse the newly added contents 。這裏討論這些問題another blog post。然而another one。

來源

2011-07-14 10:46:36

無論我做什麼，似乎都不起作用，我會用代碼更新我的問題 – SoonDead

回答這個問題已經有一段時間了。 – SoonDead

我也有類似的情況，我用Ajax使用部分視圖動態加載內容。我能夠通過兩個步驟獲得我的代碼。

當內容加載到DOM，我做了以下內容：

$.ajax({ 
    type: "Get", 
    url: SomeURL, 
    data: { TransactionId: recordId }, 
    success: function (data) { 
     $('#SomeDiv').html(data); 
     $.validator.unobtrusive.parse('#SomeDiv');    
     ShowModal(); 
    } 
});

當提交表單，我做了以下內容：

var form = $('#SomeDiv').find('form'); 
if ($(form).valid()) { 
    // call ajax post 
}

而且這似乎觸發了不顯眼的驗證。希望有人從中得到一些東西。

來源

2014-07-02 04:31:57 Purusartha

感謝這個遲到的答案。 – SoonDead

不顯眼的jQuery驗證javascript創建的元素MVC3

回答

相關問題