У меня есть много вкладок с различным входным ходом на каждой вкладке, и я проверяю ввод с помощью требуемого

Question

У меня много вкладок с разными входами. Я хочу пройтись по каждой вкладке и проверить каждый ввод с обязательным атрибутом. Когда поле ввода пустое, покажите, что фокус вкладок отображает поле ввода. Некоторые вкладки отображаются: ни одна не избегает вкладок во время перемещения. Когда последняя посещенная вкладка больше не будет пустых полей, отправьте форму.

<div id="tabs">
  <ul class="nav nav-pills" id="myTab">
    <li class="nav-item">
      <a class="nav-link active " data-toggle="pill" href="#basic">Basic</a>
    </li>
    <li class="nav-item catagory-tab display_li " data-tab_id="1" style="display: none;">
      <a class="nav-link my-link" data-toggle="pill" href="#tab-1">Tab 1</a>
    </li>
    <li class="nav-item catagory-tab display_li " data-tab_id="2" style="display: none;">
      <a class="nav-link my-link" data-toggle="pill" href="#tab-2">tab 2</a>
    </li>
    <li class="nav-item catagory-tab display_li " data-tab_id="4" style="">
      <a class="nav-link my-link" data-toggle="pill" href="#tab111">tab111</a>
    </li>
  </ul>
</div>



<div class="tab-content">

  <div class="tab-pane container fade active show" id="basic">
    <label for="email">Enter Email</label>
    <input type="text" value="" required name="entry_fields[19]" class="form-control inpt">
  </div>

  <div class="tab-pane container fade" id="tab-1">
    <label for="name">Enter Name</label>
    <input type="text" value="" name="entry_fields[20]" class="form-control inpt"><br />
    <label for="name">Enter Age</label>
    <input type="text" value="" required name="entry_fields[21]" class="form-control inpt">
  </div>

https://jsfiddle.net/samjad20/mb03o8k7/25/