MVC 强制对元素组进行 jQuery 验证 [英] MVC Force jQuery validation on group of elements

问题描述

我使用 MVC 4 设计的表单有多个 DIVS，每个 DIVS 都有很多元素.我的目标是在用户完成字段时打开/关闭 DIVS.但是，我想在每个 DIV 上使用不显眼的验证，而不是整个表单.如果不单独检查每个元素，这可能吗?也许使用 DIV ID 之类的?我不想构建这个庞大的函数来检查每个 DIV 中的每个元素，只是为了让用户可以移动到下一个 DIV.

我正在尝试这个，但它不起作用:

 var elems = [];var 有效 = 真；("#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]))如果 ($("#" + elems[i]).valid()) {}别的 {有效 = 假；}}}

但我不断收到未定义的错误.DIV 中具有类 text_input 的元素是需要验证的元素.

解决方案

您可以使用 Validator.element(element) - 在此处查看文档，因此您可以使用以下方法(您尚未发布视图 html，因此无法为您编写实际代码)

在下一步按钮点击事件中

1. 选择里面的所有控件关联的 div - 例如var controls = $(this).closest('div').find('input, textarea, select');
2. 在 $.each 循环中，调用 $("form").validate().element($(this));
3. 如有必要，使用 $(this).valid();
测试是否有效
4. 如果一切都有效，隐藏当前的div并显示下一个

编辑(添加示例)

查看

<h2>第1部分</h2>....//您的输入和验证@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 class="section"><h2>第2部分</h2>....//您的输入和验证<div class="error"></div><button type="button" class="next">Next</button>

<div class="section"><h2>第3部分</h2>....//您的输入和验证<div class="error"></div><button type="submit" class="next">Submit</button>//最后一节的提交按钮

CSS

.section:not(:first-of-type) {显示:无；}

脚本

$('button').click(function () {var container = $(this).closest('.section');var isValid = true;$.each(container.find('input'), function () {$('form').validate().element($(this));如果 (!$(this).valid()) {isValid = false;返回假；}});如果(有效){container.next('.section').show().find('input').first().focus();容器.隐藏()；} 别的 {container.find('.error').text('请完成');}});

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

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

解决方案

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)

In the Next button click event

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

Edit (example added)

View

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

Script

$('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屋！