Jquery UI Tabs- Advancing Tabs With Next/Previous Buttons Depending On Input Fields Values

I am using Jquery UI Tabs that are operated only with a previous and next button. In my first tab I have select boxes and in order to advance you have to choose an option from the

Solution 1:

Only change the tab on next or prev button, if

• (A) the prev button has been clicked or
• (B) current tab is the 1st one, a really last select exists and there an option is choosen or
• (C) current tab is the 2nd one and all (trimmed) text-values are not empty.

Here is the next untested extension:

$('.next-tab, .prev-tab').click(function() {
    var tabIndex = $(this).attr("rel");
    if (
        $(this).hasClass('prev-tab') ||                          /*(A)*/
        (
            $('#tabs').tabs('option', 'selected') == 0 &&        /*(B)*/
            $('.update.last').length > 0 && 
            parseInt($('.update.last').val(), 10) > 0
        ) ||
        (
            $('#tabs').tabs('option', 'selected') == 1 &&        /*(C)*/ 
            $.trim($('#title').val()).length > 0 && 
            $.trim($('#price').val()).length > 0 &&
            $.trim($('#description').val()).length > 0
        )
    ) {
        $tabs.tabs('enable', tabIndex)
            .tabs('select', tabIndex)
            .tabs("option","disabled", [0, 1]);
    }
    return false;
});

=== UPDATE ===

Added a tab specific alert:

$('.next-tab, .prev-tab').click(function() {
    var prev = $(this).hasClass('prev-tab');
    var currentTab = $('#tabs').tabs('option', 'selected');
    if (
        prev ||                                                  /*(A)*/
        (
            currentTab == 0 &&                                   /*(B)*/
            $('.update.last').length > 0 &&
            parseInt($('.update.last').val(), 10) > 0
        ) ||
        (
            currentTab == 1 &&                                   /*(C)*/
            $.trim($('#title').val()).length > 0 &&
            $.trim($('#price').val()).length > 0 &&
            $.trim($('#description').val()).length > 0
        )
    ) {
        var tabIndex = $(this).attr("rel");
        $tabs.tabs('enable', tabIndex)
            .tabs('select', tabIndex)
            .tabs("option","disabled", [0, 1]);
    } else if (!prev) {
        switch (currentTab) {
            case 0:
                alert('Please choose an option.');
                break;
            case 1:
            case 2:
                alert('Please fill out all form inputs.');
                break;
        }
    }
    return false;
});

Solution 2:

Modify the click event handler:

$('.next-tab, .prev-tab').click(function() {
  var $t = $(this), tabIndex = $t.attr("rel");
  if ($t.hasClass("prev-tab")) {
    if ($("input").filter('[value=""]').length) {
      alert("Please fill out all form inputs.");
      return false;
    }
  }
...

Hope that helps.

Solution 3:

You could write a validate function that looks at the selected tab and then the items that need to be filled out for next to be enabled. This function can then be bound on change to each of the items that need to be filled out.