我正在组装一个Jquery UI标签式表单，每个标签上都有需要验证的输入。 理想情况下，我想验证当前可见的标签页，然后选择下一个没有验证的标签页。
最好的方法是什么？ 我的代码如下...
<div id="tabs">
<ul>
<li><a href="#tab1">One</a></li>
<li><a href="#tab2">Two</a></li>
</ul>
<div id="tab1" >
<div>
<ul>
<li>
<label class="uiLbl">
Forename</label>
<asp:TextBox ID="txtMainCtcForename" runat="server" class="required"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
Surname</label>
<asp:TextBox ID="txtMainCtcSurname" runat="server" class="required"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
Email</label>
<asp:TextBox ID="txtMainCtcEmail" runat="server"></asp:TextBox>
</li>
</ul>
</div>
</div>
<div id="tab2" class="ui-tabs-hide">
<div>
<ul>
<li>
<label class="uiLbl">
Company Name</label>
<asp:TextBox ID="txtComName" runat="server" class="required"></asp:TextBox></li>
<li class="blankRow"> </li>
<li>
<label class="uiLbl">
Address</label>
<asp:TextBox ID="txtAdd1" runat="server"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
</label>
<asp:TextBox ID="txtAdd2" runat="server"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
</label>
<asp:TextBox ID="txtAdd3" runat="server"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
</label>
<asp:TextBox ID="txtAdd4" runat="server"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
Town</label>
<asp:TextBox ID="txtTwn" runat="server"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
County</label>
<asp:TextBox ID="txtCty" runat="server"></asp:TextBox>
</li>
<li>
<label class="uiLbl">
Postcode</label>
<asp:TextBox ID="txtPostcode" runat="server"></asp:TextBox>
</li>
</ul>
</div>
</div>
编辑：还有人有什么想法吗？ 在我看来，我需要... ...
如果当前标签页通过验证...
试试这个 http:/www.position-relative.netcreationformValidatordemosdemoMultipleForms.html 并验证它们，并通过这种方式显示标签2。 $("#tabs").tabs({ selected: 1 }); 或者你可以通过以下方式禁用标签2。 $('#tabs').tabs('disable', 1);
我的解决方案是使用我找到的一个例子 此处 突出显示有验证错误的选项卡，这取决于你实施的jQuery验证插件。
$(function () {
$("#tabs").tabs();
});
$(document).ready(function () {
$("#tabs :input").attr("disabled", true);
});
$("##ctl00_ContentPlaceHolder1_submitButton").button();
$(document).ready(function () {
$("#updateLink").click(function () {
if ($("#updateLink").text() == 'CLICK TO EDIT') {
$("#updateLink").text("SAVE CHANGES")
toEditMode();
} else {
if ($("#aspnetForm").valid()) {
$("#aspnetForm").submit();
$("#ctl00_ContentPlaceHolder1_submitButton").click();
$("#updateLink").text("CLICK TO EDIT")
toDisplayMode();
}
}
});
});
function toEditMode() {
$('#tabs :input').removeAttr('disabled');
}
function toDisplayMode() {
$("#tabs :input").attr("disabled", true);
}
$("#aspnetForm").validate({
submitHandler: function (form) {
alert("submitted!");
},
invalidHandler: function (form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var invalidPanels = $(validator.invalidElements()).closest(".ui-tabs-panel", form);
if (invalidPanels.size() > 0) {
$.each($.unique(invalidPanels.get()), function () {
$(this).siblings(".ui-tabs-nav")
.find("a[href='#" + this.id + "']").parent().not(".ui-tabs-selected")
.addClass("ui-state-error")
.show("pulsate", { times: 3 });
});
}
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
var $panel = $(element).closest(".ui-tabs-panel", element.form);
if ($panel.size() > 0) {
if ($panel.find("." + errorClass + ":visible").size() == 0) {
$panel.siblings(".ui-tabs-nav").find("a[href='#" + $panel[0].id + "']")
.parent().removeClass("ui-state-error");
}
}
}
});
这取决于你所使用的jQuery验证插件，显然，你也应该在服务器上进行验证。
我建议你在服务器上实现 Jorns jQuery验证插件 (由jQuery团队的成员编写).http:/bassistance.dejquery-pluginsjquery-plugin验证。
http:/bassistance.dejquery-pluginsjquery-plugin-validation。
你可以在这里看到一个多步骤工作的例子。在代码中，你可以找到解决方案。
http:/jquery.bassistance.devalidatedemomultipart。
他们使用 "一个自定义的方法来检查一个元素在验证时是否在当前页面上"。
var v = $("#cmaForm").validate({
errorClass: "warning",
onkeyup: false,
onblur: false, submitHandler: function() {
alert("Submitted, thanks!"); } });
$.validator.addMethod("pageRequired", function(value, element) {
var $element = $(element)
function match(index) {
return current == index && $(element)
.parents("#sf" + (index + 1)).length;
}
if (match(0) || match(1) || match(2)) {
return !this.optional(element);
}
return "dependency-mismatch";
}, $.validator.messages.required)
在 "next "按钮的点击事件中（我想在你的例子中是标签），他们用变量 "current "跟踪当前页面。你应该将 "#sf "部分改为 "#tab"，并将表单的名称改为 "cmaForm".你应该为标签或按钮添加一个点击事件，以便从一个标签传递到另一个标签。
$("#tab1").click(function() {
if (v.form()) {
current = 0;
}
});