我正在使用jQuery UI选项卡和验证插件来处理表单,该表单被分成4个步骤(类似向导),通过导航而不是选项卡在步骤之间导航。每个步骤都包含表单元素并需要进行验证。以下是我的代码:
<script>
$('#registration').validate({
errorClass: "warning",
debug:true,
onkeyup: true,
onblur: true,
});
var $tabs = $('#tabs').tabs();
$('.next').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
});
$('.back').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
});
</script>
<div id="tabs">
<ul style="display:none">
<li><a href="#tabs-1">1</a></li>
<li><a href="#tabs-2">2</a></li>
<li><a href="#tabs-3">3</a></li>
<li><a href="#tabs-4">4</a></li>
</ul>
<form id="registration" name="registration" method="post" action="<?php $PHP_SELF ?>">
<div id="tabs-1">
<input name="test1" type="text" class="required" /><br />
<input name="test2" type="text" class="required" /><br />
<input name="test3" type="text" class="required" /><br />
<input name="test4" type="text" class="required" /><br />
<button type="button" class="next" rel="2" name="test">Next</button>
</div>
<div id="tabs-2">
<input name="test1" type="text" class="required" /><br />
<input name="test2" type="text" class="required" /><br />
<input name="test3" type="text" class="required" /><br />
<input name="test4" type="text" class="required" /><br />
<button type="button" class="back" rel="1" name="test">Back</button>
<button type="button" class="next" rel="3" name="test">Next</button>
</div>
<div id="tabs-3">
<input name="test1" type="text" class="required" /><br />
<input name="test2" type="text" class="required" /><br />
<input name="test3" type="text" class="required" /><br />
<input name="test4" type="text" class="required" /><br />
<button type="button" class="back" rel="2" name="test">Back</button>
<button type="button" class="next" rel="4" name="test">Next</button>
</div>
<div id="tabs-4">
<input name="test1" type="text" class="required" /><br />
<input name="test2" type="text" class="required" /><br />
<input name="test3" type="text" class="required" /><br />
<input name="test4" type="text" class="required" /><br />
<button type="button" class="back" rel="3" name="test">Back</button>
<button type="submit" class="submit" name="test">Register</button>
</div>
</form>
</div>
我尝试在每个步骤中进行验证,但无法成功,请帮助我解决问题。
$('.next').click(function() { $tabs.tabs('select', $(this).attr("rel")); $('#registration').valid(); });
这是你想要的吗? - Nick Craver$('.next').click(function() { if($('#registration').valid()) $tabs.tabs('select', $(this).attr("rel")); });
- Nick Craver