1

我目前正在使用 jQuery UI 选项卡以及 ajax。我总共有 3 个选项卡，只能通过“下一个”和“上一个”按钮导航。我已经设置了参数：在 tab1 中，如果您离开输入字段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>
4

1 回答 1

3

您的代码中有一些奇怪的地方。您注册“下一个”和“上一个”两次......

那不是你想要的。

您想要的是以下行为：

  1. 如果点击 prev - 总是去 prev
  2. 如果单击下一步 - 仅在满足必填字段时才进行下一步。

这意味着您应该更改以下内容

  1. 从第一个事件中删除.prev-tab选择器 - 并删除对变量的任何提及prev。这种方法应该只处理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;
      });

这应该可以解决您的问题。

您可以在操作中看到这一点并在我的网站上下载我的资源

以上将回答您的问题。

现在，请允许我有机会建议一种方法，让您为“下一个”场景编写更短的代码。

在该行的正上方$('.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;
            });
于 2012-08-10T21:59:43.810 回答