Вкладки пользовательского интерфейса Jquery — перемещение вкладок с помощью кнопок «Далее»/«Назад» в зависимости от значений полей ввода.

Я использую вкладки пользовательского интерфейса Jquery, которые работают только с предыдущей и следующей кнопками. На моей первой вкладке у меня есть поля выбора, и для продвижения вам нужно выбрать вариант из поля выбора. Меня беспокоит вкладка # 2. У меня есть три поля ввода, которые я хотел бы, чтобы пользователь заполнил, прежде чем идти дальше.

Как я могу отключить кнопку «Далее», чтобы пользователь был вынужден заполнять поля ввода перед переходом на следующую вкладку? ПРИМЕР

JS – СЛЕДУЮЩАЯ/НАЗАД

<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>

javascript jquery tabs jquery-ui
person CodingWonders90    schedule 26.07.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Меняйте вкладку только на кнопке следующая или предыдущая, если

  • (A) была нажата кнопка назад или
  • (B) текущая вкладка является 1-й, существует действительно последний выбор, и там выбран вариант или
  • (C) текущая вкладка является второй, и все (обрезанные) текстовые значения не пусты .

Вот следующее непроверенное расширение:

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

=== ОБНОВЛЕНИЕ ===

Добавлено оповещение для конкретной вкладки:

$('.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;
});
person scessor    schedule 27.07.2012
comment
Идеально! Попробовал, и это сработало идеально. ничего себе, без сомнения, вы гуру jquery. - person CodingWonders90; 27.07.2012
comment
Я собираюсь попытаться реализовать способ увидеть, не заполнил ли пользователь поле ввода и нажать кнопку, а затем показать предупреждение Пожалуйста, заполните необходимые поля - person CodingWonders90; 27.07.2012
comment
можно ли добавить что-то подобное в круглые скобки для оповещения, если пользователь все еще нажимает кнопку «Далее», не заполнив обязательные поля: if ($i.length != $i.filter('[value!=""]').length) { alert("Please fill out all form inputs."); return false; } - person CodingWonders90; 27.07.2012
comment
Вы должны добавить загрузчик ajax (непосредственно перед jQuery.getJSON в updateSelectBox.js), чтобы ничего нельзя было щелкнуть при загрузке на первой вкладке и удалить его после успешной обработки (в том же файле). Я уезжаю на эти выходные, увидимся. - person scessor; 27.07.2012
comment
Спасибо, мой друг. Я бы принял это во внимание. Но прежде чем вы пойдете, я добавил дополнительную вкладку с дополнительными полями ввода и настроил ее так же, как и другие, для проверки, но при нажатии следующей кнопки не появляется окно предупреждения. Если вам нравится, проверьте мой пример сайта. Еще раз, спасибо - person CodingWonders90; 27.07.2012
comment
Для каждой вкладки вы должны добавить case в switch (также для 3-й вкладки). Я обновил свой ответ. В качестве альтернативы вы можете добавить default. Увидимся. - person scessor; 27.07.2012
comment
это имеет смысл при использовании чехлов в коммутаторе, спасибо, наслаждайтесь и хороших выходных, увидимся! - person CodingWonders90; 27.07.2012
comment
Друг мой, помнишь твое предложение про загрузчик ajax. Если вам нужно больше баллов: ВОПРОС - person CodingWonders90; 29.07.2012

arrow_upward
1
arrow_downward

Измените обработчик события клика:

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

Надеюсь, это поможет.

person Joe Johnson    schedule 26.07.2012
comment
+1 Спасибо, у меня возникла проблема (я не уверен, правильно ли я изменил обработчик события клика), но пользователь все равно может перейти на следующую вкладку, не вводя ничего в поле ввода. Обновлена ​​ССЫЛКА. - person CodingWonders90; 27.07.2012
comment
Я только что отредактировал... может это исправит? Я был, пожалуй, немного краток. Если вы вернете false, это должно помешать работе ссылки. - person Joe Johnson; 27.07.2012
comment
Я изменил его на ваш отредактированный ответ, но он не работает должным образом. Вы можете проверить с Пример сайта, чтобы увидеть результаты. - person CodingWonders90; 27.07.2012
comment
Я еще раз отредактировал код — теперь он короче и проще. По сути, если какие-либо входные данные имеют пустое значение (пользователь не заполнил поле), метод фильтра вернет эти элементы. Условие (внутреннее) if будет истинным (и выполнит оператор предупреждения), если какие-либо входные данные имеют пустое значение. - person Joe Johnson; 31.07.2012

arrow_upward
0
arrow_downward

Вы можете написать функцию проверки, которая просматривает выбранную вкладку, а затем элементы, которые необходимо заполнить для включения следующего. Затем эту функцию можно привязать при изменении к каждому из элементов, которые необходимо заполнить.

person jholloman    schedule 26.07.2012