How to verify that all fields with `required` were filled with form.Ubmit()?

Asked

Viewed 5,289 times

0

The application loads data via ajax dynamically according to the item selected by the user in a select. Depending on the selected option it can load another select or some inputs to be filled, and all data has the attribute required Since they are all mandatory, however when clicking the button to give Ubmit form the same does not check if the items were selected or filled, how can I validate this data with jquery? Follows a general outline 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>
<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>

jquery form

1 answer

3


Dude, if you just mess with the form tag, depending on the browser, it already validates. Give one executed in the code below. If you have any questions, tell me which complement with a js to validate. Is very easy :)

$('#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>

  • in the application I am using the data-toggle and role as you indicated but also not fuciona I do not know if it can be the fact of the data is coming from an ajax and this being created after the of all the file js, I don’t know if that makes sense

  • Actually, I just copied your code and adjusted the positioning of the tag form. The data-role and data-toggle attributes do not affect the functioning of the validation in principle. For what purpose do you use these attributes in your form? If you are not using them, you can take them out.

  • I used these two attributes by bootstrap indication to solve the problem as per bootstrap Validator but it didn’t work either

  • Got it. In this case, I believe you would have to use the js bootstrap library, in addition to css. But I will post in the above code a simple validation with js using the example. Take a look there.

  • I found another detail. I had several formats in html. Can you leave one alone? It would be easier...

  • I think yes I did not get to test with only one, as the data came from ajax I thought I should create a form for each installment line, I will do the test here

  • One already solves. However, js will only work in an older browser because required is already interpreted by default in the browser. Anything is just talk.

  • Diego forgot to mention that the Submit button is out form, so I’m using the $('#form) function. Submit(); could this be the problem?

  • That depends. The important thing is that the form has the Submit event triggered and that someone is waiting for this event. In this example I gave, it would work.

Show 4 more comments

Browser other questions tagged jquery form

You are not signed in. Login or sign up in order to post.