我有一个使用 jQuery UI 选项卡的 ASP.NET Web 表单页面。在每个选项卡中都有一组输入，包括在选项卡中提交输入的按钮（使用 AJAX 调用，但这与本次讨论无关）。
我只想将 jquery 验证引擎 (https://github.com/posabsolute/jQuery-Validation-Engine) 附加到包含选项卡内容的输入子集，但是，由于 ASP.NET Web 表单的工作方式，只有一个表单元素和验证引擎必须附加到表单。
有没有一种简单的方法来告诉这个验证引擎在验证调用中包含当前可见的选项卡/元素？
【问题讨论】：
标签： asp.net webforms jquery-ui-tabs jquery-validation-engine
编辑回复：
你要找的更容易！！！如果您只是想验证用户当前所在选项卡上的字段而不限制他们转到其他选项卡，那么在激活我提供的部分代码之前忽略选项卡，并将您的 jQuery 验证引擎初始化为 ignore 验证非所有非活动标签的可见字段。您的代码如下所示：
jQuery("#myForm").validationEngine('attach', {
promptPosition: "bottomLeft",
validationEventTrigger: "submit",
validateNonVisibleFields: false // this does the trick!
});
这是用于说明示例的新 JSFiddle：http://jsfiddle.net/T7daH/
干杯！ :-)
----------------------------------- -------- 原始答案 ---------------------------------------- -------------
实际上有一种非常简单的方法可以使用跨越多个选项卡的表单来实现 jQuery 验证引擎，而无需以编程方式触发每个字段或选项卡单击的验证。
如果您有以下跨多个选项卡的表单...
<form id="myForm" action="">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a>
</li>
<li><a href="#tabs-2">Tab 2</a>
</li>
<li><a href="#tabs-3">Tab 3</a>
</li>
</ul>
<div id="tabs-1">
<input type="text" id="requiredFiled" name="requiredField" class="validate[required]" />
</div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
然后你像这样设置表单和选项卡：
jQuery("#myForm").validationEngine('attach', {
promptPosition: "bottomLeft",
validationEventTrigger: "submit",
validateNonVisibleFields: true,
updatePromptsPosition: true
});
$(function () {
$("#tabs").tabs({
beforeActivate: function (event, ui) {
if (!$("#myForm").validationEngine('validate')) {
event.preventDefault();
$('#myForm').validationEngine('hide');
setTimeout(function () {
$("#myForm").validationEngine('validate');
}, 450);
}
}
});
});
如果用户当前所在的选项卡不完全有效，则结果是用户无法选择另一个选项卡。这是 JSFiddle 演示：http://jsfiddle.net/g9yLL/36/
干杯！ :-)
【讨论】：
我有一个带有多标签表单的网站，并使用以下方法解决了它：
$(document).ready(function(){}
$('#tab1').click(function(){
// #tab1 name of the tab / a href link inside that tab
var field1 = $("#field1").validationEngine('validate');
var field2 = $("#field2").validationEngine('validate');
if(field1 || sources )
{ // to show the error messages ;
return false;
}
});
$('#tab2').click(function(){
// #tab2 name of the tab / a href link inside that tab
var field1 = $("#field1").validationEngine('validate');
var field2 = $("#field2").validationEngine('validate');
if(field1 || field2 )
{ // to show the error messages ;
return false;
}
});
);
有关更多信息，请查看https://github.com/posabsolute/jQuery-Validation-Engine 并在验证标题下搜索字段验证。
【讨论】：