在元件组MVC力jQuery验证 [英] MVC Force jQuery validation on group of elements

问题描述

我的状态，我用MVC 4设计具有多发的div中每一个的元素。我的目标是为用户完成该字段以打开/关闭DIVS。不过，我想用不显眼的审定上的每个格，而不是整个表格。这是可能的，而不逐一检查每一个元素？也许使用DIV ID还是什么？我不希望建立这个巨大的功能来检查每个元素在每一个DIV只是让用户可以移动到下一个DIV。

My form I am designing with MVC 4 has mutiple DIVS with many elements in each one. My objective is to open/close DIVS as the user completes the fields. However, I want to use the unobtrusive validation on each DIV, rather than the whole form. Is that possible without checking each element individually? Maybe using a DIV ID or something? I don't want to build this massive function to check each and every element in each DIV just so the user can move to the next DIV.

我想这一点，它不工作：

I am trying this and it is not working:

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

但我不断收到一个未定义的错误。具有类TEXT_INPUT在DIV元素与需要验证的。

but I keep getting an undefined error. The elements in the DIV that have the class text_input are the ones with validation required.

推荐答案

您可以使用验证各个控件 Validator.element（元素） - 看到文档这里，所以你可以用下面的办法（你还没有发布的意见，HTML，所以不能写实际code代表你）

You can validate individual controls using Validator.element(element) - see documentation here, so you could use the following approach (you haven't posted the views html so can't write the actual code for you)

在单击下一步按钮事件

1. 选择范围内的所有控件
   相关 DIV - 例如无功控制= $（本）.closest（'格'）找到（'输入，文本区域，选择'）;


2. 在一个 $每个循环，调用 $（形式）验证（）元（$（本））;。


3. 如果有必要，请测试是否有效与 $（本）.valid（）;


4. 如果一切是有效的，隐藏当前的div并显示下一个

1. Select all the the controls within the associated div - e.g. var controls = $(this).closest('div').find('input, textarea, select');
2. In an $.each loop, call $("form").validate().element($(this));
3. If necessary, test if valid with $(this).valid();
4. If everything is valid, hide the current div and display the next

修改（例如添加）

查看

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

这篇关于在元件组MVC力jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！