MVC强制对元素组进行jQueryvalidation

我用MVC 4devise的表单具有多个DIVS，每个DIVS中都有很多元素。 我的目标是在用户完成字段时打开/closuresDIVS。 但是，我想对每个DIV使用不显眼的validation，而不是整个表单。 这可能没有单独检查每个元素？ 也许使用DIV ID或什么的？ 我不想构build这个庞大的函数来检查每个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类的元素是需要validation的元素。

Answer 1

您可以使用Validator.element(element)validation单个控件 – 请参阅此处的文档 ，以便您可以使用以下方法（您没有发布视图html，因此无法为您编写实际的代码）

在下一步button单击事件

1. select关联div所有控件 – 例如var controls = $(this).closest('div').find('input, textarea, select');
2. 在$.each循环中调用$("form").validate().element($(this));
3. 如有必要，testing$(this).valid();是否有效$(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'); } });