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'); 
    } 
});