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>