Question

我已经为我的jquery选项卡设置了一个演示来向您展示我的问题：

所以，我将在每个选项卡上都有表单，我想要做的是在选项卡上添加某种预防，如果他们没有填写字段。因此，如果他们尝试点击下一个标签，只有在第一个标签中填写了信息后，它才会变为活动状态：

function checkForm()
   {
       if($("#textbox").val()=='')
       {
          return false
       }
       else
       {
         return true;
       }
    }


$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
   var val = checkForm();
   if(val)
   {
       event.preventDefault();
       $(this).parent().addClass("current");
       $(this).parent().siblings().removeClass("current");
       var tab = $(this).attr("href");
       $(".tab-content").not(tab).css("display", "none");
       $(tab).fadeIn();
   }
   else 
   {
      return false;
   }
 });





 <div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Your details</a></li>
        <li><a href="#tab-2">Additional information</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
        <li><a href="#tab-4">Tab 4</a></li>
    </ul>

<div class="tab">

    <div id="tab-1" class="tab-content">

        <label>Company name:</label>
        <input type="text" id="textbox">
            <br>

        <label>Contact name:</label>    
        <input type="text" id="textbox">
            <br>


        <label>Email address:</label>    
        <input type="text" id="textbox">
            <br>



        <label>Telephone number:</label>    
        <input type="text" id="textbox">
            <br>



        <label>How did you find us?</label>    
        <input type="text" id="textbox">   
            <br>



        <input type="submit" value="Submit">             

    </div>




    <div id="tab-2" class="tab-content">          

    </div>




    <div id="tab-3" class="tab-content">
    3
    </div>




    <div id="tab-4" class="tab-content">
    4
        </div>
</div>

</form>

Answer 1

构建一个类似于下面的JS验证函数来验证所有文本框。

   function checkForm()
   {
       if($("#textbox").val()=='')
       {
          return false
       }
       else
       {
         return true;
       }
    }

然后从click事件中调用您的检查表单方法。如果表单验证然后继续，则取消点击事件。

$(".tabs-menu a").click(function(event) {
   var val = checkForm();
   if(val)
   {
       event.preventDefault();
       $(this).parent().addClass("current");
       $(this).parent().siblings().removeClass("current");
       var tab = $(this).attr("href");
       $(".tab-content").not(tab).css("display", "none");
       $(tab).fadeIn();
   }
   else 
   {
      return false;
   }
 });

Answer 2

这是一个简单的解决方案：http://jsfiddle.net/q4f2hdxd/1/

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {

        if (checkForm('form1') === true) {
            event.preventDefault();
            $(this).parent().addClass("current");
            $(this).parent().siblings().removeClass("current");
            var tab = $(this).attr("href");
            $(".tab-content").not(tab).css("display", "none");
            $(tab).fadeIn();
        }


    });
});

function checkForm(form_id) {

    var $fields = $("#"+form_id).find('input');
    var error = false;

    for (i = 0; i < $fields.length; i++) {
        if ( $($fields[i]).val() == "" ) {
            error = true;
            break;
        }
    }

    if (error === true) {
        $('#'+form_id).find('.error').html('error');
        return false;
    } else {
        return true;
    }


}

Answer 3

您不能拥有多个具有特定ID的HTMLElement！

只需为实际需要的所有输入添加class="required"，您就可以使用此代码：

jQuery(document).ready(function($) {
  var currentTab;
  $(".tabs-menu a").click(function(event) {
      event.preventDefault();
      var $this = $(this),
          requiredAreFilled = true,
          tab = $this.attr("href"),
          currentTab = $('.tabs-menu .current').children('a').attr('href');
      $(currentTab).find('.required').each(function(index, elt) {
          if (!$(elt).val()) requiredAreFilled = false;
      });
      if (requiredAreFilled) {
          $this.parent().addClass("current")
              .siblings().removeClass("current");
          $(".tab-content").not(tab).hide();
          $(tab).fadeIn();
      }
  });
});

在那里查看结果：http://jsfiddle.net/q4f2hdxd/2/

将验证添加到jquery选项卡

3 个答案: