How to check if all fields with 'required' were filled with form.submit ()?

Navigation
0

The application loads data via ajax dynamically according to the item selected by the user in a select. Depending on the option selected it may load another select or some inputs to be filled, and all data has the required attribute as all are required, but clicking the button to submit the form does not check if items have been selected or filled, how can I validate this data with jquery? Here is a rough sketch of the application. 

function insert_options_cartao(index) {
  var options = "";
  options += "<select class=\"form-control cartao\" id=\"select-cartao-" + index + "\">";
  options += "<option value=''>Selecione</option>";
  options += "<option value='1'>Cartão Crédito a vista</option>";
  options += "<option value='2'>Cartão Crédito parcelado</option>";
  options += "<option value='3'>Cartão de Débito</option>";
  options += "</select>";
  return options;

}

function insere_option() {
  var options = "";
  options += "<option value=''>Selecione</option>";
  options += "<option value='1'>Boleto</option>";
  options += "<option value='2'>Cartão</option>";
  options += "<option value='3'>Cheque</option>";
  options += "<option value='4'>Dinheiro</option>";
  options += "<option value='5'>Transferência</option>";
  return options;
}

function insert_inputs_boleto(id) {
  var inputs_boleto = "";
  inputs_boleto += "<input class=\"banco form-control\" name=\"banco\" type=\"text\" class=\"form-control\" id=\"banco-" + id + "\" placeholder=\"Banco\" required>";
  inputs_boleto += "<input class=\"agencia form-control\" name=\"agencia\" type=\"text\" class=\"form-control\" id=\"agencia-" + id + "\" placeholder=\"Agencia\" required>";
  inputs_boleto += "<input class=\"conta form-control\" name=\"conta\" type=\"text\" class=\"form-control\" id=\"conta-" + id + "\" placeholder=\"Conta\" required>";
  inputs_boleto += "<input class=\"ncheque form-control\" name=\"cheque\" type=\"text\" class=\"form-control\" id=\"ncheque-" + id + "\" placeholder=\"Nº Cheque\" required>";
  return inputs_boleto;
}

var selects = $("#table_com_parcelas select");
var index = null;
var valor = null;
var qtde = selects.length;
selects.on('change', function() {
  var valor = this.value;
  indice = selects.index(this);
  selects.each(function(index) {
    if (index > indice) {
      $(this).val(valor);
      if (valor === '2' && index > indice) {
        $('.form-full-' + index).html(insert_options_cartao(index));
        $('.form-full-' + qtde).html(insert_options_cartao(qtde));
      } else if (valor === '3' && index > indice) {
        $('.form-full-' + index).html(insert_inputs_boleto(index));
        $('.form-full-' + qtde).html(insert_inputs_boleto(qtde));
      } else if (valor === '5') {
        $('.form-full-' + index).html(insert_inputs_docted(index));
        $('.form-full-' + qtde).html(insert_inputs_docted(qtde));
      } else if (valor === '' || valor === '1' || valor === '4') {
        $('.form-full-' + index).empty();
        $('.form-full-' + qtde).empty();
      }
    }
  });
});


$(document).on('blur', '.banco', function() {
  $('.banco').val($('.banco').val());
});
$(document).on('blur', '.agencia', function() {
  $('.agencia').val($('.agencia').val());
});
$(document).on('blur', '.conta', function() {
  $('.conta').val($('.conta').val());
});
$(document).on('blur', '.ncheque', function() {
  var chqs = $('.ncheque');
  var index = null;
  var partes = this.value.split('-');
  var valor = parseInt(partes[1] || partes[0]);
  indice = chqs.index(this);
  if (valor) {
    $('.ncheque').each(function(index) {
      if (index > indice) {
        $(this).val([partes[1] ? partes[0] : null, valor + index].filter(Boolean).join('-'));
      }
    });
  } else {
    $('.ncheque').val('');
  }
});

$(document).on('change', '.cartao', function() {
  var cartao = $('.cartao');
  var valor = this.value;
  indice = cartao.index(this);

  cartao.each(function(index) {
    if (index > indice) {
      $(this).val(valor);
    }
  });
});

$(document).ready(function() {
  $('#btn_checkout').click(function() {
    var form = $('#formulario-1'); //coloquei apenas o form-1 para exemplificar vou utilizar each
    form.submit();
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="table_com_parcelas" class="table table-condensed table-hover table-responsive table-striped">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align">1 de 4</td>
      <td class="align">28/10/2017</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <form id="formulario-1" action="" method="post" data-toggle="validator" role="form"><select class="form-control" id="select-1" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-1"></span>
          </form>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">2 de 4</td>
      <td class="align">28/11/2017</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <form id="formulario-2" action="" method="post" data-toggle="validator" role="form"><select class="form-control" id="select-2" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-2"></span>
          </form>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">3 de 4</td>
      <td class="align">28/12/2017</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <form id="formulario-3" action="" method="post" data-toggle="validator" role="form"><select class="form-control" id="select-3" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-3"></span>
          </form>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">4 de 4</td>
      <td class="align">28/01/2018</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <form id="formulario-4" action="" method="post"><select class="form-control" id="select-4" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-4"></span>
          </form>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<button id="btn_checkout" name="btn_checkout" class="btn btn-warning pull-right">Salvar <span class="fa fa-angle-double-right"></span></button>
    
asked by anonymous 21.09.2017 / 07:38

1 answer

2

Dude, if you just tap the form tag, depending on the browser, it already validates. Please give one in the code below. If in doubt, tell me which add-in with a js to validate. It's really cool:) 

$('#formulario-1').on('submit', function(){
  $(this).find('input[required=true]').each(function(){
    if(!$(this).val()){
      alert('O campo ' + $(this).attr('id') + ' é obrigatório!');
      return false;
    }
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script><formid="formulario-1" action="" method="post" data-toggle="validator" role="form">
<table id="table_com_parcelas" class="table table-condensed table-hover table-responsive table-striped">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align">1 de 4</td>
      <td class="align">28/10/2017</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <select class="form-control" id="select-1" required="true"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-1"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">2 de 4</td>
      <td class="align">28/11/2017</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <select class="form-control" id="select-2" required="true"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-2"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">3 de 4</td>
      <td class="align">28/12/2017</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <select class="form-control" id="select-3" required="true"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-3"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align">4 de 4</td>
      <td class="align">28/01/2018</td>
      <td class="align">R$ 2.750,00</td>
      <td class="align form">
        <div class="form-inline">
          <select class="form-control" id="select-4" required="true"><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-4"></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<button id="btn_checkout" name="btn_checkout" class="btn btn-warning pull-right">Salvar <span class="fa fa-angle-double-right"></span></button>

</form>
    
21.09.2017 / 13:38
Transform string into operator How forms are opened - Visual Studio