Javascript Jquery验证多个选项卡，一次验证一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5643500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery validation multiple tabs, validate one at a time?
提问by Jordan
I'm new to jQuery and I'm trying to use it and the validation plugin (http://docs.jquery.com/Plugins/Validation) to create a multi-part form with multiple tabs for different sections. Right now I have it where there are multiple tabs and the "Next" button switches to the next tab.
我是 jQuery 的新手，我正在尝试使用它和验证插件 (http://docs.jquery.com/Plugins/Validation) 创建一个多部分表单，其中包含不同部分的多个选项卡。现在我有多个选项卡，“下一步”按钮切换到下一个选项卡。
The problem I'm having is that when I finally submit on the last page, the form validates properly but if there are errors on the other page the user isn't notified, and validation really only happens once "submit" is clicked.
我遇到的问题是，当我最终在最后一页提交时，表单会正确验证，但如果其他页面上存在错误，则不会通知用户，并且验证实际上仅在单击“提交”后发生。
How would I validate each individually when I click "Next"? I don't really want to create multiple forms or keep track of hidden fields :S Any suggestions?
当我单击“下一步”时，我将如何单独验证每个？我真的不想创建多个表单或跟踪隐藏字段：S 有什么建议吗？
Thanks!
谢谢！
<script type="text/javascript">
$(document).ready(function() {
//....stuff
//tabs
var tabs = $("#tabs").tabs();
$(".nexttab").click(function() {
//var selected = $("#tabs").tabs("option", "selected");
//$("#tabs").tabs("option", "selected", selected + 1);
$("#tabs").tabs("select", this.hash);
});
//use link to submit form instead of button
$("a[id=submit]").click( function(){
$(this).parents("form").submit();
});
//form validation
var validator = $("#myForm").validate();
});
</script>
<form class="cmxform" id="myForm" method="post" action="">
<div id="tabs">
<ul>
<li><a href="#general">General</a></li>
<li><a href="#tab2"></a></li>
</ul>
<div id="general">
....stuff...
<p>
<a class="nexttab navbutton" href="#tab2"><span>Next</span></a>
</p>
</div>
<div id="tab2">
<h2>Tab2</h2>
<p>
<a class="nexttab navbutton" href="#general"><span>Prev</span></a>
<a class="submit navbutton" id="submit" href="#"><span>Submit</span></a>
</p>
</div>
</div>
</form>
Edit:
编辑：
@Andrew:
@安德鲁：
I did some combination of your 2nd example and disabling tabs. Seems to work, aside from having the page refresh re-disable the tabs.
我做了你的第二个例子和禁用标签的一些组合。除了让页面刷新重新禁用选项卡之外，似乎还可以。
var tabs = $("#tabs").tabs({
disabled: [1,2,3,4,5],
select: function(event, ui) {
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
if(ui.index > current)
{
$(panelId).find("input").each(function() {
//console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
}
return valid;
}
});
In combination with:
结合：
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("enable", selected+1);
$("#tabs").tabs("option", "selected", selected + 1);
});
采纳答案by Andrew Whitaker
This is possible using the .element(selector)function of validator. What you're going to do is iterate through each element on the active tab and call that function on the input. This will trigger validation on each element in turn, showing the validation message.
这可以使用 的.element(selector)功能实现validator。您要做的是遍历活动选项卡上的每个元素并在输入上调用该函数。这将依次触发对每个元素的验证，显示验证消息。
$(".nexttab").click(function() {
var valid = true;
var i = 0;
var $inputs = $(this).closest("div").find("input");
$inputs.each(function() {
if (!validator.element(this) && valid) {
valid = false;
}
});
if (valid) {
$("#tabs").tabs("select", this.hash);
}
});
Additionally, you'll probably want to run similar code when a user clicks a tab to go to a new set of inputs, instead of clicking "next".
此外，您可能希望在用户单击选项卡以转到一组新输入时运行类似的代码，而不是单击“下一步”。
Here's a working example: http://jsfiddle.net/c2y6r/
这是一个工作示例：http: //jsfiddle.net/c2y6r/
Update:Here's another way you could do it, canceling the selectevent upon invalid form elements:
更新：这是您可以执行的另一种方法，select在无效的表单元素上取消事件：
var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
select: function(event, ui) {
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
$(panelId).find("input").each(function() {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
return valid;
}
});
However, now you have to consider allowing the user to go back when they've entered invalid data into the current page. On the other hand, you get the bonus of keeping all the validation code inside of one function which gets fired if the person clicks a tab or your next link.
但是，现在您必须考虑允许用户在将无效数据输入到当前页面时返回。另一方面，您可以将所有验证代码保存在一个函数中，如果该人单击一个选项卡或您的下一个链接，该函数就会被触发。
Example: http://jsfiddle.net/c2y6r/1/
示例：http: //jsfiddle.net/c2y6r/1/
Update 2, if you want to allow people to navigate backwards through the tab interface:
更新 2，如果您想允许人们通过选项卡界面向后导航：
var tabs = $("#tabs").tabs({
select: function(event, ui) {
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
if (ui.index > current) {
$(panelId).find("input").each(function() {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
}
return valid;
}
});
回答by vdidxho
The existing code didn't work for me (maybe it's dated) so i came up with the following. This example is assuming using jquery tabs and jquery validator.
现有的代码对我不起作用（也许它已经过时了）所以我想出了以下内容。此示例假设使用 jquery 选项卡和 jquery 验证器。
$('#tabs').tabs(
{
beforeActivate: function( event, ui )
{
var valid = $("#myForm").valid();
if (!valid) {
validator.focusInvalid();
return false;
}
else
return true;
}
});
