0

A aplicação carrega dados via ajax de forma dinâmica conforme item selecionado pelo usuário em um select. Dependendo da opção selecionada ele pode carregar um outro select ou alguns inputs para serem preenchidos, e todos os dados possuem o atributo required pois todos são obrigatórios, porém ao clicar no botão para dar submit do formulário o mesmo não checa se os itens foram selecionados ou preenchidos, de que forma posso validar estes dados com jquery? Segue um esboço genérico da aplicação.

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

1 Resposta 1

3

Cara, se você apenas mexer na tag form, dependendo do navegador, ele já valida. Dá uma executada no código abaixo. Caso tenha dúvidas, me fala que complemento com um js para validar. É bem facinho :)

$('#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>
<form id="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>

9
  • na aplicação estou utilizando o data-toggle e role conforme você indicou porém também não fuciona não sei se pode ser o fato dos dados estar vindo de um ajax e esta sendo criado depois do de todo o arquivo js, não sei se isso faz sentido
    – WMomesso
    Commented 21/09/2017 às 11:45
  • Na verdade, eu só copiei o seu código e ajustei o posicionamento da tag form. Os atributos data-role e data-toggle não afetam, a princípio, o funcionamento da validação. Para qual finalidade utiliza estes atributos em seu form? Caso não esteja utilizando, pode tirá-los. Commented 21/09/2017 às 11:48
  • Usei estes dois atributos por indicação do bootstrap para solucionar o problema conforme bootstrap validator mas também não funcionou
    – WMomesso
    Commented 21/09/2017 às 11:55
  • Entendi. Neste caso, acredito que você teria de usar a biblioteca js do bootstrap, além do css. Mas vou postar no código acima uma validação simples com o js usando o exemplo. Da uma olhada lá. Commented 21/09/2017 às 11:57
  • Encontrei outro detalhe. tinha vários forms no html. Tem como deixar um só? Seria mais fácil... Commented 21/09/2017 às 12:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .