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 select box. My concern is in Tab#2 I have three input fields which I would like the user to fill before going any further.

How can I disable the Next button so the user is forced to fill the input fields before advancing to the next tab? EXAMPLE

JS- NEXT/PREVIOUS

<script>
        $(function() {

                var $tabs = $('#tabs').tabs({
                    disabled: [0, 1]
                });

                $(".ui-tabs-panel").each(function(i) {

                    var totalSize = $(".ui-tabs-panel").size() - 1;

                    if (i != totalSize) {
                        next = i + 2;
                        $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
                    }

                    if (i != 0) {
                        prev = i;
                        $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
                    }

                });


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

        });
</script>

HTML

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
  <label for="title"> Title: *</label>
    <input type="text"  id="title" name="title" class="" size="33" autocomplete="off" value="<? $title ?>"/><br>
    <label for="price"> Price: *</label>             
      <input type="text" name="price" class="" size="8" maxlength="9" id="price" autocomplete="off" value="<? $price ?>" /><br>
           <label for="description"> Description: *</label> 
         <textarea id="description" name="description" class=""><? $description ?></textarea><br />

</div>

回答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;
});

回答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.

回答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.

来源：https://stackoverflow.com/questions/11678745/jquery-ui-tabs-advancing-tabs-with-next-previous-buttons-depending-on-input-fie

标签

javascript

jquery

jquery-ui

tabs