javascript - 如果表单字段未填写，如何不打开窗口？

Question

我的表单上有一个提交按钮，带有 jQ​​uery 操作，可以根据用户的选择打开一个窗口。但是，我只想在字段已填满时打开窗口。我有这段代码，我想将其与 if 合并。

$(function() {
  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    window.open($('#chkveg').val());
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://formmail.kinghost.net/formmail.cgi" method="POST">
  <input name="nome" type="text" class="nome" id="nome" required width="100%" placeholder="Nome:">
  <input name="cpf" type="text" class="cpf" id="cpf" placeholder="CPF:">
  <div style="clear:both"></div><br/>
  <input name="nascimento" type="text" class="nascimento" id="nascimento" placeholder="Data de nascimento:">
  <select id="chkveg">
    <option value="https://pag.ae/7ULKPL7TH">Associados Ancord + C.Dados = R$700,00</option>
    <option value="https://pag.ae/7ULKQ8Zm2">Associados Ancord = R$800,00</option>
    <option value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$800,00</option>
  </select>
  <input id="btnget" class="submit-btn" type="submit" value="INSCREVER-SE">
</form>

例如:

IF (#FORM).REQUIRED = TRUE {
  (#BUTTON).WINDOWOPEN
}

谢谢

Answer 1

因为您使用提交按钮，您需要return false ，以防万一您不想做任何事情。在此之前，您还需要检查您的必填字段是否为空。 (即$(your field).val() === ""那么它是空的，如果你需要的都有，那么调用window.open()函数。注意:您可以合并多个字段进行检查，即:$(".your_field1, .your_field2, .your_field3").val() === ""但这是一个“或”运算。

一种可能的解决方案:

$(function() {
  $('#btnget').click(function() {
    let isEmpty = false;
    $('#data_form input,textarea,select').filter(':visible').each(function(i) {
      if ($(this).val() === "") {
        isEmpty = true;
        return false;
      }
    });
    
    if (isEmpty) {
      return false;
    }
    
    window.open($('#chkveg').val());
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="data_form" action="http://formmail.kinghost.net/formmail.cgi" method="POST">
  <input name="nome" type="text" class="nome" id="nome" required width="100%" placeholder="Nome:">
  <input name="cpf" type="text" class="cpf" id="cpf" placeholder="CPF:">
  <div style="clear:both"></div><br/>
  <input name="nascimento" type="text" class="nascimento" id="nascimento" placeholder="Data de nascimento:">
  <select id="chkveg">
    <option value="https://pag.ae/7ULKPL7TH">Associados Ancord + C.Dados = R$700,00</option>
    <option value="https://pag.ae/7ULKQ8Zm2">Associados Ancord = R$800,00</option>
    <option value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$800,00</option>
  </select>
  <input id="btnget" class="submit-btn" type="submit" value="INSCREVER-SE">
</form>

如果您只需要必填字段，请使用 filter('[required]:visible')而不是filter(':visible') .