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

Я нашел решение, текст ссылки

Answer 2

Вы можете добавить опцию ignore, чтобы игнорировать вкладки, которые в данный момент не видны с помощью селектора :hidden , например:

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