Javascript 向jquery选项卡添加验证

我已经为我的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>

函数检查表（）
{
if（$（“#文本框”）.val（）=''）
{
返回错误
}
其他的
{
返回true；
}
}
$（文档）.ready（函数（）{
$（“.tabs菜单a”）。单击（函数（事件）{
var val=checkForm（）；
if（val）
{
event.preventDefault（）；
$（this.parent（）.addClass（“当前”）；
$（this.parent（）.sides（）.removeClass（“当前”）；
var tab=$（this.attr（“href”）；
$（“.tab内容”）.not（tab.css（“显示”、“无”）；
$（tab.fadeIn（）；
}
其他的
{
返回false；
}
});

公司名称：


联系人姓名：


电邮地址：


电话号码：


你是怎么找到我们的？


3.
4.

---

构建一个JS验证函数，如下所示，用于验证所有文本框

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

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

$(".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;
   }
 });

---

以下是一个简单的解决方案：

$（文档）.ready（函数（）{
$（“.tabs菜单a”）。单击（函数（事件）{
if（检查表（'form1'）==true）{
event.preventDefault（）；
$（this.parent（）.addClass（“当前”）；
$（this.parent（）.sides（）.removeClass（“当前”）；
var tab=$（this.attr（“href”）；
$（“.tab内容”）.not（tab.css（“显示”、“无”）；
$（tab.fadeIn（）；
}
});
});
功能检查表单（表单id）{
var$fields=$（“#”+form_id）.find（'input'）；
var错误=错误；
对于（i=0；i<$fields.length；i++）{
if（$（$fields[i]）.val（）==“”）{
错误=真；
打破
}
}
如果（错误===真）{
$（'#'+form_id）.find（'.error'）.html（'error'）；
返回false；
}否则{
返回true；
}
}

您不能有多个具有特定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();
      }
  });
});

---

查看结果：

您好，我刚刚使用了您提供的代码，但选项卡仍然可以单击？我是否遗漏了什么，因为我使用了提供的代码，它仍然告诉我可以单击选项卡，但没有发生验证？验证是否有效？如果尝试使用此事件。preventDefault（）；而不是仅仅返回false。我刚刚重新提交了我的问题，以向您展示我所做的事情……如果能向我展示我的错误可能会很好？看到这很好，但是如果您没有放入任何内容，并且显示错误，当您返回选项卡时，错误消息仍然显示？因此，我还需要一个提交按钮，怎么办如果他们没有在所有字段中提交信息，您可以查询字段？很抱歉，恐怕我不明白您的要求。每个选项卡上都有一个提交按钮，对吗？但是“如果他们没有提交信息，请查询字段”是什么意思？因此，使用上面的代码，它工作得很好，但我需要表单有一个提交按钮，然后移动到下一个选项卡，如果尚未输入字段，则它会标记该字段，但会显示一个错误，说明哪些字段尚未提交。好吧，您可以这样做：我将其保留在注释中，因为它不在初始页中我想我回答了原来的问题；-）

$(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;
    }


}

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();
      }
  });
});