jquery验证多个选项卡，一次验证一个？ [英] Jquery validation multiple tabs, validate one at a time?
问题描述
我是jQuery的新手，我试图使用它和验证插件（http://docs.jquery.com/Plugins/Validation）为不同部分创建具有多个选项卡的多部分表单。现在我有它有多个选项卡，并且下一步按钮切换到下一个选项卡。
我遇到的问题是，当我最后一页提交时，表单正确验证，但如果在另一页上有错误，用户不是通知，验证确实只发生一次提交被点击。
当我点击下一步时，我将如何单独验证每一个？我真的不想创建多个表单或跟踪隐藏字段：S有什么建议吗？
谢谢！
< 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）;
}）;
//使用链接提交表单而不是按钮
$（a [id = submit]）。click（function（）{
$（this）.parents（form）。submit（）;
}）;
//表单验证
var validator = $（＃myForm） .validate（）;
}）;
< / script>
< form class =cmxformid =myFormmethod =postaction =>
< div id =tabs>
< ul>
< li>< a href =＃general>常规< / a>< / li>
< li>< a href =＃tab2>< / a>< / li>
< / ul>
< div id =general>
.... stuff ...
< p>
< a class =nexttab navbuttonhref =＃tab2>< span>下一步< / span>< / a>
< / p>
< / div>
< div id =tab2>
< h2> Tab2< / h2>
< p>
< a class =nexttab navbuttonhref =＃general>< span>上一个< / span>< / a>
< a class =submit navbuttonid =submithref =＃>< span>提交< / span>< / a>
< / p>
< / div>
< / div>
< / form>
编辑：
@Andrew：
我组合了第二个示例和禁用选项卡。似乎工作，除了页面刷新重新禁用标签。
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;
}
$ b}）;
}
return valid;
}
}）;
结合：
$（。nexttab）。click（function（）{
var selected = $（＃tabs）。tabs（option，selected）;
$（＃tabs）。tabs（enable，selected + 1）;
$（＃tabs）。tabs（option，selected，selected +1）;
}）;
使用 .element（selector） 函数验证。你要做的是遍历活动选项卡上的每个元素，并在输入中调用该函数。这将依次触发每个元素的验证，并显示验证消息。
$（。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;
}
$ b if（valid）{
$（＃tabs）。tabs（select，this.hash）;
}
}）;
另外，当用户点击选项卡转到新的一组输入，而不是点击下一步。
下面是一个工作示例： http://jsfiddle.net/ c2y6r /
更新：以下是另一种方法，取消选择 event on invalid form elements：
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;
}
}）;
但是，现在您必须考虑允许用户在输入无效数据时返回当前页面。另一方面，如果用户点击一个标签或下一个链接，您将获得将所有验证代码保存在一个函数中的优势。
示例： http://jsfiddle.net/c2y6r/1/
更新2 ，如果您想允许用户通过标签界面向后导航：
<$ c （$ b $ select：function（event，ui）{
var valid = true;
var current = $（this）$ c $> var tab = $（＃tabs .tabs（option，selected）;
var panelId = $（＃tabs ul a）。eq（current）.attr（href）;
if （ui.index> current）{
$（panelId）.find（input）。each（function（）{
console.log（valid）;
如果（！validator.element（this）&& valid）{
valid = false;
}
}）;
}
ret瓮有效;
}
}）;
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.
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?
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);
});
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.
$(".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/
Update: Here's another way you could do it, canceling the select event upon invalid form elements:
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/
Update 2, if you want to allow people to navigate backwards through the tab interface:
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;
}
});
这篇关于jquery验证多个选项卡，一次验证一个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
