我是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);
});
//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>
编辑：
@安德鲁：
我做了你的第二个例子和禁用选项卡的组合.似乎工作,除了页面刷新重新禁用选项卡.
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;
}
});
结合：
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option","selected");
$("#tabs").tabs("enable",selected+1);
$("#tabs").tabs("option",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;
}
});
if (valid) {
$("#tabs").tabs("select",this.hash);
}
});
另外,当用户单击一个选项卡以转到一组新的输入,而不是单击“下一步”时,您可能希望运行类似的代码.
这是一个例子：http://jsfiddle.net/c2y6r/
更新：这是另一种可以做到的方式,取消无效表单元素上的select事件：
var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
select: function(event,"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,如果您想允许人们通过标签界面向后浏览：
var tabs = $("#tabs").tabs({
select: function(event,"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;
}
});
