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

Question

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

现在我想检查 basic_info div 的所有必需输入是否已填满，然后再移动到任何其他 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 上。

Answer 1

它会检查所有字段，因为它们都有 class 'required'。您可以尝试为每个使用一个 id 或不同的 class 名称来单独识别它们，然后检查它们的值的长度。我举个例子吧：

<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”class 的所有元素，然后检查每个元素的值的长度并显示结果。

Answer 2

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

$("#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... 轻松移动下一个 - 上一个。

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

How to check if fields are filled in a specific div

html

jquery

laravel