jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击

我目前正在使用 jQuery UI 选项卡以及 ajax。我总共有3个选项卡，只能通过"下一步"和"上一个"按钮导航。我已经设置了参数：在选项卡 1 中，如果您离开输入字段car_name您将收到一条警报消息和带有 tab2 的类似参数。

我的预期设置：如果不满足参数，则用户无法前进到下一个选项卡。但是，该部分不起作用。用户会收到一个警报：他们可以忽略该警报，再次单击"下一步"，然后前进到下一个选项卡。如何禁用"下一步"按钮，直到满足参数（填写输入字段）？例

谢谢

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