I have a form that is broken up into a Jquery Content slider (i.e. vertical tabs). 
This breaks the form into manageable chunks for the user to fill in. 

At the moment, if the user forgets to fill in a field, an `error` class is applied to that section of the form. However, if that section is not visible, the user won't see the error styling.

I want to add the error class to the corresponding part of the vertical tab navigation menu. How can I do this?

The Jquery code that is used to flip between the sections is as follows:

```
$(".taptabs li").live('click', function() {
     $(this).parent().parent().parent().$('.pages .page').hide().eq($(this).index()).show().addClass("animated").addClass(mode).addClass("fadeInLeft");
});

```

(`Taptabs` is the name of the navigation list. Each section of the form has a class of `page` Each section is also in the HTML element of `<section>` ).

I thought this would work to make the error message appear on the navigation:

```
  $(".changing-room").submit(function () {
      var isFormValid = true;
      $("input.required").each( function () {
          if ( $.trim( $(this).val() ).length === 0 ) {
              $(this).parent().addClass("error");
              var menulink = $(this).closest('section').index();
              $('.tapnav li').index(menulink).addClass('error'); 

              isFormValid = false;
          }
       });
   });

```

In this code, when an Input is left empty, the closest `Section` tag is located (This section tag holds that particular section of the form). The index of that section tag is calculated and then it is applied to the corresponding `LI` of the Nav menu. However, it doesn't seem to work, it actually breaks all the code!

Here is a [JS Fiddle](http://jsfiddle.net/big_smile/aRjhz/4/)