Do not open window if fields are not filled in

Question

I have a submit button in my form, with an action in jquery to open a window depending on the user’s choice. However, I just want the window to open if the fields are filled.

I have this code and want to merge with an if.

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

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

For example:

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

My form is simple:

<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>

Someone can help me?

Answer 1

Since you are already decorating the inputs with the required attribute, just check if the form is valid, you can use the method checkValidity();.

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

  $('#btnget').click(function() {
    let formValido = document
      .getElementById("meuForm")
      .checkValidity();
    
    if (formValido)
      window.open($('#chkveg').val());
  })
});

@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<form id="meuForm" 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>