jquery ui tabs and form validation plugin

Question

Hi; I'm using jquery Ui tabs and validation plugins, for my forms, the forms divided in 4 steps(like wizard) and navigate trough the tabs by navigation(not tabs), each steps contain form element and need to be validate,; her 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 validate in each step but i cant, please help me out

Answer 1

You can add the ignore option to ignore the tabs that aren't currently visible via the :hidden selector, like this:

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

Answer 2

I found the solution, link text