jquery ui tabs and form validation plugin

Question

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

Nick Craver · Accepted Answer · 2010-10-08 01:51:58Z

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'
});

answered Oct 8, 2010 at 1:51

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pezhman Fallahi Over a year ago

i would like to validate when i clicks next button, but it is not working what i try; your code also is not working :(

Nick Craver Over a year ago

@Pezhman - Add a validation call, for example: $('.next').click(function() { $tabs.tabs('select', $(this).attr("rel")); $('#registration').valid(); }); is that what you're after?

Pezhman Fallahi Over a year ago

:( it is not working ! i have tried that one! when i click next it validate and it goes to the next tab, but what i want is, it must validate and not go to the next step, until writing all the required filed,

Nick Craver Over a year ago

@Pezhman - Oh, right of course, like this: $('.next').click(function() { if($('#registration').valid()) $tabs.tabs('select', $(this).attr("rel")); });

Pezhman Fallahi Over a year ago

wow tnx, it is working , but there is an small problem, if in the first steps shows errors, in all steps(tabs) the error message are visible!

Pezhman Fallahi · Accepted Answer · 2010-10-08 12:55:36Z

1

I found the solution, link text

answered Oct 8, 2010 at 12:55

Pezhman Fallahi

411 silver badge3 bronze badges

Collectives™ on Stack Overflow

jquery ui tabs and form validation plugin

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related