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>

我尝试在每个步骤中进行验证，但无法成功，请帮助我解决问题。

- Pezhman Fallahi

Answer 1

您可以添加ignore选项来忽略当前不可见的选项卡，使用:hidden选择器，像这样：

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

- Nick Craver

---

我想在点击下一步按钮时进行验证，但是我尝试的方法都不起作用；你的代码也不起作用 :( - Pezhman Fallahi

@Pezhman - 添加一个验证调用，例如：$('.next').click(function() { $tabs.tabs('select', $(this).attr("rel")); $('#registration').valid(); }); 这是你想要的吗？ - Nick Craver

:( 它不起作用！我已经尝试过了！当我点击下一步时，它会验证并转到下一个选项卡，但我想要的是，在填写所有必填字段之前，它必须进行验证并且不能进入下一步。 - Pezhman Fallahi

@Pezhman - 当然，像这样：$('.next').click(function() { if($('#registration').valid()) $tabs.tabs('select', $(this).attr("rel")); }); - Nick Craver

哇，谢谢，它正在工作，但有一个小问题，如果在第一步中出现错误，则所有步骤（选项卡）中的错误消息都可见！ - Pezhman Fallahi

Answer 2

我找到了解决方案，链接文本

- Pezhman Fallahi