MVC強制元素組jQuery驗證

Question

我用MVC 4設計的表單具有多個DIVS，每個元素都有很多元素。我的目標是在用戶完成字段時打開/關閉DIVS。但是，我想對每個DIV使用不顯眼的驗證，而不是整個表單。這可能沒有單獨檢查每個元素？也許使用DIV ID或什麼？我不想構建這個龐大的函數來檢查每個DIV中的每個元素，只有這樣用戶才能移動到下一個DIV。

我想這一點，它不工作：

var elems = []; 
var valid = true; 
("#Contact").find('.text_input').each(function() { 
    elems.push(this.id); 
    } 
    for (var i = 0; i<= elems.length; i++) { 
     if ($("#" + elems[i]) != undefined) { 
      $("#form1").validate().element("#" + elems[i])) 
      if ($("#" + elems[i]).valid()) { 
      } 
      else { 
      valid = false; 
      } 
     } 
    } 

，但我不斷收到一個未定義的錯誤。 DIV中具有text_input類的元素是需要驗證的元素。

Answer 1

可以使用Validator.element(element)驗證個人控制 - see documentation here，所以你可以用下面的辦法（你還沒有發佈的意見HTML，所以無法爲你寫的實際代碼）

在單擊下一步按鈕，事件

1. 選擇 關聯的所有控件div - 例如var controls = $(this).closest('div').find('input, textarea, select');
2. 在$.each循環，呼叫$("form").validate().element($(this));
3. 如果需要，測試是否有效與$(this).valid();
4. 如果一切是有效的，隱藏當前的div和顯示下一個

編輯（加入例如）

查看

<div class="section"> 
    <h2>Section 1</h2> 
    .... // Your inputs and validation 
    @Html.LabelFor(m => m.SomeProperty) 
    @Html.TextBoxFor(m => m.SomeProperty) 
    @Html.ValidationMessageFor(m => m.SomeProperty) 
    <div class="error"></div> 
    <button type="button" class="next">Next</button> 
</div> 
<div class="section"> 
    <h2>Section 2</h2> 
    .... // Your inputs and validation 
    <div class="error"></div> 
    <button type="button" class="next">Next</button> 
</div> 
<div class="section"> 
    <h2>Section 3</h2> 
    .... // Your inputs and validation 
    <div class="error"></div> 
    <button type="submit" class="next">Submit</button> // submit button for last section 
</div> 

CSS

.section:not(:first-of-type) { 
    display:none; 
} 

腳本

$('button').click(function() { 
    var container = $(this).closest('.section'); 
    var isValid = true;  
    $.each(container.find('input'), function() { 
    $('form').validate().element($(this)); 
    if (!$(this).valid()) { 
     isValid = false; 
     return false; 
    } 
    }); 
    if (isValid) { 
    container.next('.section').show().find('input').first().focus(); 
    container.hide(); 
    } else { 
    container.find('.error').text('please complete'); 
    } 
});