如何在隐藏div之前检查是否已选中所有必填字段？

Question

var cnt = 2;
$('.next').click(function() {
  var reqField = true;
  $(this).siblings('table').find('tbody tr:nth-child(' + cnt + ') td').each(function() {
    var ele = $(this).find('center').find('select');
    if ((!$(ele).attr('disabled')) && $(ele).val() === '') {
      reqField = false;
    }
  });

  if (reqField) {
    $(this).parent().hide().next().show();
    cnt = cnt + 2;
  }
});

$('select').change(function() {
  if ($(this).val() == 'MSA')
    $(this).closest('td').next().find('select').prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <form action="ServletExample" method="post">
    <div id="div1">
      <table id="t01" border="2">
        <tbody>
          <tr>
            <td colspan="3">Welcome1</td>
          </tr>
          <tr>
            <td width=15%>
              <center><select id="L1" required>
                           <option value="">Selection1</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>         
                        </select></center>
            </td>
            <td width=12%>
              <center><select id="D1" required>
                           <option value="">Selection2</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck1" value="sentence" /> sentence1<br>
              <input type="checkbox" id="myCheck2" value=" words" />words1
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
          <tr>
            <td colspan="3">Welcome2</td>
          </tr>
          <tr>
            <td width=15%>
              <center><select id="L2" required>
                           <option value="">Selection1</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>         
                        </select></center>
            </td>
            <td width=12%>
              <center><select id="D2" required>
                           <option value="">Selection2</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck3" value="sentence" /> sentence2<br>
              <input type="checkbox" id="myCheck4" value=" words" />words2
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <button class="next">NEXT</button>
    </div>

    <div id="div2" style="display:none">
      <table id="t01" border="2">
        <tbody>
          <tr>
            <td colspan="3">Welcome3</td>
          </tr>
          <tr>
            <td>
              <center><select id="L3" required>
                           <option value="">Selection3</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>
                        </select></center>
            </td>
            <td>
              <center><select id="D3" required>
                           <option value="">Selection4</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck5" value="sentence" /> sentence3<br>
              <input type="checkbox" id="myCheck6" value=" words" />words3
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <button class="next">NEXT</button>
    </div>

    <div id="div3" style="display:none">
      <table id="t01" border="2">
        <tbody>
          <tr>
            <td colspan="3">Welcome4</td>
          </tr>
          <tr>
            <td>
              <center><select id="L4" required>
                           <option value="">Selection5</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>
                        </select></center>
            </td>
            <td>
              <center><select id="D4" required>
                           <option value="">Selection6</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck7" value="sentence" /> sentence4<br>
              <input type="checkbox" id="myCheck8" value=" words" />words4
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <button onclick="submit">Send</button>
    </div>

  </form>
</div>

我想隐藏一个div并显示另一个div。我使用jQuery并且隐藏步骤很好：

<body>

 <div id="div1">
  <select id="L1" required>
        <option value="0">please select</option>
        <option value="A">A</option> 
        <option value="B">B</option> 
  </select>
  <select id="C1" required>
        <option value="0">please select</option>
        <option value="C">C</option> 
        <option value="D">D</option> 
  </select>
  <select id="D1" required>
        <option value="0">please select</option>
        <option value="E">E</option> 
        <option value="F">F</option> 
  </select>
  <button class="next">next</button>
 </div>
 <div id="div2" style="display:none">
  <select id="D2" required>
        <option value="0">please select</option>
        <option value="3">3</option> 
        <option value="4">4</option> 
  </select>
  <button class="next">next</button>
 </div>
 <script>
    $('.next').click(function(){   
       $(this).parent().hide().next().show(); //hide parent and show next  
    });
 </script>
</body>

但问题是即使未选择某些必填字段，div也可以隐藏。

我在每个div中有5个下拉选择选项，用户必须在隐藏div之前为每个下拉列表选择一个选项，因此如果单击第一个div中的 Next 按钮，则必须检查选中所有必填字段，然后隐藏第一个div并显示第二个div。

我怎么检查这个？

我遇到了问题，它位于列标记中，因为我将网页设计为表格并将每个选择选项放在列中。

<td><select id="C1" required>
       <option value="0">please select</option>
       <option value="C">C</option> 
       <option value="D">D</option> 
</select></td>

所以，我如何检查td标签内的选择。 以下是HTML的结构

<html>

<body>
  <div id="main">
    <form action="ServletExample" method="post">
      <div id="div1">
        <table id="t01" border="2">
          <tbody>
            <tr>
              <td>
                <center><select id="L1" required>
                               <option value="">Selection1</option>
                               <option value="MSA">MSA</option>
                               <option value="dialect">Dialect</option>         
                            </select></center>
              </td>
              <td>
                <center><select id="D1" required>
                               <option value="">Selection2</option>
                               <option value="EGY">EGY</option>
                               <option value="GLF">GLF</option>
                            </select></center>
              </td>
            </tr>
          </tbody>
        </table>
        <hr />
        <button class="next">NEXT</button>
      </div>

      <div id="div2" style="display:none">
        <table id="t01" border="2">
          <tbody>
            <tr>
              <td>
                <center><select id="L2" required>
                               <option value="">Selection1</option>
                               <option value="MSA">MSA</option>
                               <option value="dialect">Dialect</option>
                            </select></center>
              </td>
              <td>
                <center><select id="D2" required>
                               <option value="">Selection2</option>
                               <option value="EGY">EGY</option>
                               <option value="GLF">GLF</option>
                            </select></center>
              </td>
            </tr>
          </tbody>
        </table>
        <hr />
        <button class="next">NEXT</button>
      </div>

      <div id="div3" style="display:none">
        <table id="t01" border="2">
          <tbody>
            <tr>
              <td>
                <center><select id="L3" required>
                               <option value="">Selection1</option>
                               <option value="MSA">MSA</option>
                               <option value="dialect">Dialect</option>
                            </select></center>
              </td>
              <td>
                <center><select id="D3" required>
                               <option value="">Selection2</option>
                               <option value="EGY">EGY</option>
                               <option value="GLF">GLF</option>
                            </select></center>
              </td>
            </tr>
          </tbody>
        </table>
        <button onclick="submit">Send</button>
      </div>

    </form>
  </div>

  <script type="text/javascript">
  </script>

</body>

</html>

Answer 1

您只需添加一个验证函数来检查select元素是否已选择值。以下是验证的工作示例。它检查用户是否选择了一个值;如果有，则前进到下一个select元素，否则不前进。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

 <div id="div1">
  <h4>D1</h4>
  <select id="D1" required>
        <option value="0">please select</option>
        <option value="1">1</option> 
        <option value="2">2</option> 
  </select>
  <button class="next">next</button>
 </div>
 <div id="div2" style="display:none">
  <h4>D2</h4>
  <select id="D2" required>
        <option value="0">please select</option>
        <option value="3">3</option> 
        <option value="4">4</option> 
  </select>
  <button class="next">next</button>
 </div>
 <script>
    $('.next').click(function(){
       if (validated(this)) {  // call the validate function
         if (!!this.parentNode.nextSibling.nextSibling.id) {  // check to make sure there is another element to switch to
          $(this).parent().hide().next().show(); //hide parent and show next
         }
       }
    });
    function validated(btn) {
      // check if a value has been selected
      var el = btn.previousSibling.previousSibling;
      if (el.value !== "0") { return true; }  // a value has been selected
      else { return false; }  // no value has been selected
    }
 </script>
</body>

＆＃13;

＆＃13;

＆＃13;

我还添加了一个检查，如果它是最后一个select元素，则不会前进到下一个项目。如果您不需要，可以查看if结帐。 （我添加了h4元素只是为了显示哪个div当前处于活动状态。）

Answer 2

您可以使用解决方案https://jsfiddle.net/bo5fdvLv/

$('.next').click(function() {
  var reqField = true;
  $(this).siblings('select').each(function() {
    if ($(this).val() === '0') {
      reqField = false;
    }
  });

  if (reqField) {
    $(this).closest('div').hide().siblings('div').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <select id="L1" required>
        <option value="0">please select</option>
        <option value="A">A</option> 
        <option value="B">B</option> 
  </select>
  <select id="C1" required>
        <option value="0">please select</option>
        <option value="C">C</option> 
        <option value="D">D</option> 
  </select>
  <select id="D1" required>
        <option value="0">please select</option>
        <option value="E">E</option> 
        <option value="F">F</option> 
  </select>
  <button class="next">next</button>
</div>
<div id="div2" style="display:none">
  <select id="D2" required>
        <option value="0">please select</option>
        <option value="3">3</option> 
        <option value="4">4</option> 
  </select>
  <button class="next">next</button>
</div>

您可以更改我的以下代码 $(this).closest('div').hide().siblings('div').show();至$(this).parent().hide().next().show();