jQuery UI Tabs - настройка параметров на NEXT/PREVIOUS нажатие кнопки

Question

В настоящее время я работаю с вкладками пользовательского интерфейса jQuery вместе с ajax. У меня есть в общей сложности 3 вкладки, которые можно перемещать только через «Далее» & «Предыдущие» кнопки. Я установил параметры: В tab1, если вы покинете поле ввода car_name, вы получите предупреждающее сообщение и аналогичные параметры с tab2.

Мое предназначение: Если этот параметр не выполняется, пользователь не может перейти на следующую вкладку. Однако эта часть не работает. Пользователь получает предупреждение: они могут игнорировать, снова нажать кнопку «Далее» и перейти к следующей вкладке. Как отключить кнопку «Следующий» до тех пор, пока не будет выполнен параметр (заполнение поля ввода)? EXAMPLE

спасибо

JS

<script> 
     $(function() { 
      var $tabs = $('#tabs').tabs({ 
       disabled: [0, 1, 2], 
       select: function() { 

       $.ajax({ 
        type: "POST", 
        url: "post_tabs.php", 
        data: { 
        "name": $("#car_name").val(), 
        "title": $("#title").val(), 
        "price": $("#price").val() 

        }, 
        success: function (result) { 
        $("#tab-3").html(result); 
        } 
       }); 
       } 
      }); 

      $(".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 prev = $(this).hasClass('prev-tab'); 
       var currentTab = $('#tabs').tabs('option', 'selected'); 
       if (
       prev || /*(A)*/ (
        currentTab == 0 && /*(B)*/ 
        $.trim($('#car_name').val()).length > 0 

       ) || (
        currentTab == 1 && /*(C)*/ 
        $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0) 


      ) { 
       var tabIndex = $(this).attr("rel"); 
       $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
       } else if (!prev) { 
       switch (currentTab) { 
        case 0: 
        alert('Please choose an option.', 'Alert Dialog'); 
        break; 
        case 1: 
        alert('Please fill out all the required fields.', 'Alert Dialog'); 
        break; 

       } 
       } 
       return false; 
      }); 


    $('.next-tab, .prev-tab').click(function() { 
      var tabIndex = $(this).attr("rel"); 
      $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
      return false; 
     }); 
}); 
     </script> 

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> 
<label for="car_name">Car Model</label> 
    <input type="text" id="car_name" class="detail" name="car_name" value="" /> <br> 

</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> 

    <label for="title">Title</label> 
    <input type="text" id="title" name="title" size="60" autocomplete="off" value=""/><br> 
    <label for="price">Price</label> 
    <input type="text" id="price" name="price" size="60" autocomplete="off" value=""/><br> 
</div> 

<div id="tab-3" class="ui-tabs-panel ui-tabs-hide"> 

</div> 

Answer 1

Существует что-то немного странно в вашем коде. Вы регистрируете «следующий» и «предыдущий» дважды ...

Это не то, что вы намеревались.

Что вы хотите следующее поведение:

1. Если предыдущий щелкают - всегда идет предыдущей
2. Если в следующем щелчке - идти дальше, только если необходимые поля будут выполнены.

это означает, что вы должны изменить следующие

1. удалить селектор .prev-tab от первого события - и удалить любое упоминание в prev vairable. Этот метод должен обрабатывать только next.
2. удалите next со второго связывания события, этот должен обрабатывать только prev.

Так что ваш JavaScript будет выглядеть следующим образом:

$('.next-tab').click(function() { 

       var currentTab = $('#tabs').tabs('option', 'selected'); 
       if (
       (
        currentTab == 0 && /*(B)*/ 
        $.trim($('#car_name').val()).length > 0 

       ) || (
        currentTab == 1 && /*(C)*/ 
        $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0 
       ) 


      ) { 
       var tabIndex = $(this).attr("rel"); 
       $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
       } else { 
       switch (currentTab) { 
        case 0: 
        alert('Please choose an option.', 'Alert Dialog'); 
        break; 
        case 1: 
        alert('Please fill out all the required fields.', 'Alert Dialog'); 
        break; 

       } 
       } 
       console.log("preventing default"); 

       return false; 
      }); 


    $('.prev-tab').click(function() { 
      var tabIndex = $(this).attr("rel"); 
      $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
      return false; 
     }); 

Это должно решить вашу проблему.

Вы можете увидеть это в действиях и скачать мои ресурсы на my site

выше ответит на ваши проблемы.

Теперь, пожалуйста, позвольте мне предложить вам способ сделать код короче для «следующего» сценария.

прямо над линией $('.next-tab').click(function() { создать следующую функцию

function isEmpty(item) { 
    return $.trim(item.val()).length <= 0; 
} 

Теперь - добавить class='required' на каждом поле ввода, которое не должно быть пустым при нажатии next.

на каждой вкладке добавить data-alert="The alert message you want to show"

Теперь HTML должен выглядеть следующим образом

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide" data-alert="Please choose an option."> 
<label for="car_name">Car Model</label> 
    <input type="text" id="car_name" class="required detail" name="car_name" value="" /> <br> 

</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide" data-alert="Please fill out all the required fields."> 
    <label for="title">Title</label> 
    <input type="text" id="title" class="required" name="title" size="60" autocomplete="off" value=""/><br> 
    <label for="price">Price</label> 
    <input type="text" id="price" class="required" name="price" size="60" autocomplete="off" value=""/><br> 
</div> 

Теперь код JS должен быть намного меньше и гораздо более ремонтопригодны (даже если добавить еще одну вкладку с поля, - он не должен меняться) - здесь это

$('.next-tab').click(function() { 
       var $tab = $(this).closest(".ui-tabs-panel"); 
       var $requiredFields = $tab.find(".required"); 
       var canContinue = true; 

       $requiredFields.each(function(index,item){ 
       console.log(["checking" , item]); 
       if (canContinue && isEmpty($(item))){ alert($tab.attr("data-alert"), 'Alert Dialog'); canContinue = false; } 

       }); 
       if (canContinue) 
       { 
       var tabIndex = $(this).attr("rel"); 
       $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
       } 
       return false; 
      });