Change the focus of the next tab where the validation fails

I have a one form in 3 jquery tab at which I am running the jquery validate.
One I press the submit it validates all the field, but I want it to focus on the second tab which has an error and not stay on the current tab, I have read in the following link that this is possible but, the command in this link is not working.
    i.e. (The alert is indeed is working, so I assume something wrong in the syntax of the command below):

http://stackoverflow.com/questions/18179148/using-jquery-to-switch-to-focus-a-tab-with-a-validation-error
      In the test page published in this link I can see that this command in commented as well.

    Here is my html page:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Create User</title>
        <link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">
        <link rel="stylesheet" href="css/validate.css">
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="js/jquery.validate.js"></script>
        <link rel="stylesheet" href="css/demos.css">
        <script>
        $(document).ready(function() {
                $( "#tabs" ).tabs();
                $( "a, button" ).button().click(function( event ) {event.preventDefault();});
                // validate createuser form on keyup and submit
                var validator = $("#createuser").validate({
                            rules: {},
                            messages: {},
                            ignore: "", //To force validator to validate all tabs prios sending - start from jquery 1.9
                            invalidHandler: function(event, validator){
                                if(validator.errorList.length)
                                {
                                  alert("Complete All Missing Fields In All Tabs");
                                  $('#tabs a[href="#' + jQuery(validator.errorList[0].element).closest(".tab-pane").attr('id') + '"]').tab('show');  //As I understood that will focus on the second tab which has an error      
                                }
                              }
                        });
           }):
           </head>
           <body>
           <form action="executescript.php" name="createuser" id="createuser" method="POST">
           <div id="tabs" class="tab-pane">
              <ul>
                <li><a href="#tabs-1">first</a></li>
                <li><a href="#tabs-2">second</a></li>
                <li><a href="#tabs-3">third</a></li>
              </ul>
            <div id="tabs-1">
            </div>
            <div id="tabs-2">
            </div>
            <div id="tabs-3">
            </div>
            </div>
          <div class="Create User">
          <center><input type="submit" id="lcreateusersubmit" value="Create Subscriber"></center>
          </div>
          </form>
          </body>
          </html>
Ashraf HassaneinAsked:
Who is Participating?
 
Sar1973Commented:
You should develop an algorythm that performs the following steps before the validation process:
1. pick the tab name/id which is actually selected;
2. checks with an iteration (for each/item tag...) if the i item/tag is the one actually selected (with a test like actually selected name/id=name/id inside the iteration);
3. store the progressive number i of the selected tag/item;
4. focuses on the i+1 item/tag.
0
 
teodor bircaCommented:
you missed the closing </script> on your JS
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.