时间戳

首页 > 解决方案 > 如何检查字段是否填写在特定的div中

jquery - 如何检查字段是否填写在特定的div中

问题描述

我有一个多部分表单，使用bootstrap tab-content. 现在，我想在移动到下一个选项卡之前检查是否所有必填字段都已填写，并显示警报消息，如果尝试移动到下一个选项卡，则重定向回上一个选项卡。这是我的表单的屏幕截图： 在此处输入图像描述

现在我想basic_info在移动到任何其他 div 之前检查是否所有必需的 div 输入都已填充。

我已执行以下操作来单独检查字段。但它实际上会检查所有字段。

$('#li_2').click(function(){
        $('#submit_section').hide();
        var length = $('.required').length;
        var value = $('.required').filter(function () {
            return this.value != '';
        });

        if (value.length>=0 && (value.length !== length)) {
            alert('Please fill out all required fields.');
        }
    });

现在，如果未填写字段，我如何一次检查完整的 div 并留在该 div 上。

标签： jqueryhtmllaravel

解决方案

这是一个小例子，先验证，然后允许用户进入下一个选项卡，我只使用了单个输入元素，您可以在此处添加所有表单验证。

$("#home_form input").on("keyup",function(){
  if($(this).val().trim()){
    $("a[href='#menu1']").attr("data-toggle","tab").removeClass('disabled');
  }else{
    $("a[href='#menu1'],a[href='#menu2']").removeAttr("data-toggle").addClass('disabled');
    $("#menu1_form")[0].reset();
    $("#menu2_form")[0].reset();
  }
});

$("#menu1_form input").on("keyup",function(){
  if($(this).val().trim()){
    $("a[href='#menu2']").attr("data-toggle","tab").removeClass('disabled');
  }else{
    $("a[href='#menu2']").removeAttr("data-toggle").addClass('disabled').val("");
    $("#menu2_form")[0].reset();
  }
});
.nav-tabs li{
  margin-left:10px;
}
.disabled{
  color:grey !important;
  text-decoration:none !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a class="disabled" href="#menu1">Menu 1</a></li>
  <li><a class="disabled" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <form id="home_form">
      <input type="text" name="name">
    </form>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <form id="menu1_form">
      <input type="text" name="name">
    </form>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <form id="menu2_form">
      <input type="text" name="name">
    </form>
  </div>
</div>

如果您转到上一个选项卡并清空输入文本，它将再次禁用后续选项卡。您可以使用 number to like#form1或#form2... 轻松移动下一个上一个。

推荐阅读