jquery-ui - MVC 强制对元素组进行 jQuery 验证

Question

我使用 MVC 4 设计的表单有多个 DIVS，每个 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 ，因此您可以使用以下方法(您尚未发布 View html，因此无法为您编写实际代码)

在 Next 按钮单击事件中

选择里面的所有控件
关联 div - 例如var controls = $(this).closest('div').find('input, textarea, select');

在 $.each循环，调用 $("form").validate().element($(this));

如有必要，使用 $(this).valid(); 测试是否有效

如果一切都有效，则隐藏当前 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');
  }
});