Question

我有一个使用bootstrap tab-content构建的多部分表单。现在我想检查所有必填字段是否已填满，然后移至下一个选项卡并显示警告消息，如果尝试移动到下一个选项卡，则重定向回上一个。这是我的表单看起来像的屏幕截图：

现在我想在移动到任何其他div之前检查basic_info 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，如果字段未填充。

Answer 1

这是一个小例子来获取想法，首先验证然后允许用户进入下一个标签，我只使用单个输入元素，你可以在这里添加所有表单验证。

$("#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>

如果您转到上一个标签并清空输入文本，它将再次禁用后续标签。您可以使用数字来点击#form1或#form2 ...以便轻松移动下一个上一个。

Answer 2

它检查所有字段，因为它们都具有所需的类别＃39;。您可以尝试使用id或不同的类名来单独识别它们，然后检查它们的值的长度。让我举一个实例的例子：

<input name="firstName" id= "fName"class="required" type="text"/>
<input name="lastName" id= "lName" class="required" type="text"/>

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

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

这只是检查一个字段。您可以尝试使用for循环来获取所有元素＆＃39; .required＆＃39; class，然后检查每个值的长度并显示结果。

如何检查特定div中是否填写了字段

2 个答案: