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,因此无法为您编写实际代码)
在下一步按钮点击事件中
- 选择里面的所有控件关联的
div
- 例如var controls = $(this).closest('div').find('input, textarea, select');
- 在
$.each
循环中,调用$("form").validate().element($(this));
- 如有必要,使用
$(this).valid();
测试是否有效 - 如果一切都有效,隐藏当前的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
- Select all the the controls within the
associated
div
- e.g.var controls = $(this).closest('div').find('input, textarea, select');
- In an
$.each
loop, call$("form").validate().element($(this));
- If necessary, test if valid with
$(this).valid();
- 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屋!