Jquery ui tabs and form validation module

Question

I use jquery Ui tabs and plugins to check, for my forms, forms divided into 4 steps (for example, a wizard) and moving through tabs using navigation (not tabs), each step contains a form element and needs to be checked ;; this is my code:

<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>

I try to check at every step, but I can not, please help me

Answer 1

You can add a parameter ignoreto ignore tabs that are currently not visible using the :hiddenselector , for example:

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

Answer 2

I found a solution, link text