javascript - tab - Pestañas Jquery UI: pestañas avanzadas con los botones Siguiente/Anterior según los valores de los campos de entrada

tabs jquery bootstrap

Question

Estoy usando Jquery UI Tabs que se operan solo con un botón anterior y siguiente. En mi primera pestaña tengo cuadros de selección y para avanzar debes elegir una opción del cuadro de selección. Mi preocupación está en la pestaña n. ° 2. Tengo tres campos de entrada que me gustaría que el usuario completara antes de continuar.

¿Cómo puedo desactivar el botón Siguiente para que el usuario se vea obligado a completar los campos de entrada antes de avanzar a la siguiente pestaña? EJEMPLO

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>

Answer 1

Puede escribir una función de validación que examine la pestaña seleccionada y luego se habiliten los elementos que deben completarse para el siguiente. Esta función puede vincularse con el cambio a cada uno de los artículos que deben completarse.

Answer 2

Solo cambie la pestaña en el botón siguiente o anterior , si

• (A) se ha hecho clic en el botón anterior o
• (B) la pestaña actual es la primera, existe realmente una última selección y allí se elige una opción o
• (C) la pestaña actual es el 2º y todos los valores de texto ( recortados ) no están vacíos.

Aquí está la siguiente extensión no probada:

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

=== ACTUALIZACIÓN ===

Se agregó una alerta específica de pestaña:

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

Answer 3

Modificar el controlador de eventos click:

$(''.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;
    }
  }
...

Espero que ayude.