Как проверить, заполнены ли поля в определенном div

Question

У меня есть многочастная форма, построенная с использованием 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, если поля не заполнены.

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

Проверяет все поля, потому что у них всех есть класс 'required'. Вы можете попробовать использовать идентификатор или другое имя класса для каждого, чтобы идентифицировать их по отдельности, а затем проверить длину их значения. Позвольте мне привести пример экземпляра:

<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', а затем проверить длину значения каждого и отобразить результат.