title: jQuery UI Tabs- Setting parameters to NEXT/PREVIOUS button clicks
body: <p>I am currently working with jQuery UI tabs, along with ajax. I have a total of 3 tabs which can only be navigated through "Next" &amp; "Previous" buttons. I have set parameters: In tab1 if you leave input field <code>car_name</code> you will get an alert message and similar parameters with tab2.</p>
  
  <p><em>My intended set up:</em> if the parameter is not met then user can't advance to the next tab. However, that part is not working. The user gets an alert: which they can ignore, click next again, and advance to next tab. How can I disable the "next" button until parameter(fill out input field) is fulfilled? <a href="http://webprolearner2346.zxq.net/dropdown-menu/tabs.php" rel="nofollow">EXAMPLE</a></p>
  
  <p>thank you</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>    &lt;script&gt;  
          $(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("&lt;a href='#' class='next-tab mover' rel='" + next + "'&gt;Next Page &amp;#187;&lt;/a&gt;");
                }
                if (i != 0) {
                  prev = i;
                  $(this).append("&lt;a href='#' class='prev-tab mover' rel='" + prev + "'&gt;&amp;#171; Prev Page&lt;/a&gt;");
                }
              });
  
  
  
              $('.next-tab, .prev-tab').click(function () {
                var prev = $(this).hasClass('prev-tab');
                var currentTab = $('#tabs').tabs('option', 'selected');
                if (
                  prev || /*(A)*/ (
                    currentTab == 0 &amp;&amp; /*(B)*/
                    $.trim($('#car_name').val()).length &gt; 0
  
                  ) || (
                    currentTab == 1 &amp;&amp; /*(C)*/
                    $.trim($('#title').val()).length &gt; 0 &amp;&amp; $.trim($('#price').val()).length &gt; 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;
        });
  });
           &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="tab-1" class="ui-tabs-panel ui-tabs-hide"&gt;
   &lt;label for="car_name"&gt;Car Model&lt;/label&gt;
       &lt;input type="text" id="car_name" class="detail" name="car_name" value="" /&gt; &lt;br&gt;
  
  &lt;/div&gt;
  
  &lt;div id="tab-2" class="ui-tabs-panel ui-tabs-hide"&gt;
  
       &lt;label for="title"&gt;Title&lt;/label&gt;
       &lt;input type="text" id="title" name="title" size="60" autocomplete="off" value=""/&gt;&lt;br&gt;
       &lt;label for="price"&gt;Price&lt;/label&gt;
       &lt;input type="text" id="price" name="price" size="60" autocomplete="off" value=""/&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;div id="tab-3" class="ui-tabs-panel ui-tabs-hide"&gt;
  
  &lt;/div&gt;
  </code></pre>