forms - jquery ui 选项卡和表单验证插件

Question

我正在使用 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>

我尝试在每个步骤中进行验证，但我做不到，请帮帮我

Answer 1

您可以添加ignore 选项来忽略当前通过:hidden selector 不可见的选项卡。 ，像这样:

$('#registration').validate({
  errorClass: "warning",
  debug:true,
  onkeyup: true,
  onblur: true,
  ignore: ':hidden'
});