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

【问题标题】：How to check if fields are filled in a specific div如何检查字段是否填写在特定的div中
【发布时间】：2023-03-03 04:26:01
【问题描述】：

我有一个多部分表单，使用 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 上。

【问题讨论】：

你能分享一下最小的运行例子吗？
@rian zaman 你做了很好的解决方案。我认为您可以轻松地在这些行中获得所需的内容：var length ... 和 var value... 只需将 div 的 id 添加到此处的选择器中：$('.required').所以它会像 $('#mydiv .required')。
@Hans Dash 谢谢。您的解决方案效果很好。

标签： jquery html laravel

【解决方案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... 轻松移动下一个-上一个。

【讨论】：

非常感谢。你的代码帮助我理解了我必须做什么。我没有单独的表格。我只有一个。但是我已经结合了@Hans Dashs 的解决方案和您的解决方案以使其发挥作用。它现在完美运行。 :)

【解决方案2】：

它检查所有字段，因为它们都具有“必需”类。您可以尝试为每个使用 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 循环来获取具有“.required”类的所有元素，然后检查每个元素的值的长度并显示结果。

【讨论】：