Disable Submit button after validating empty field using jquery

Question

I want to disable the Submit button to validate some fields preventing them from being empty. But there is a catch, because these fields are only displayed according to the selection of a combo.

Ex. Employee combo Qtd (1 to 5) Selecting 1, displays the div containing the Employee Name 1 and CPF 1 fields Selecting 2, displays the div with employee fields 1 and 2. So on.

So it is no use if I put a required, because if the user selects 1 the Employee Name 5 and CPF 5 fields are not required.

Thank you!

Answer 1

The easiest way is to set the disabled

$('botao_submit').attr('disabled', true);

More information:

1. $.attr()
2. disabled

Follow a more detailed example (more complicated way)

$(document).ready(function() {
  
  //troque o click por submit e o btEnvio por form, coloquei assim com click por que provavelmente o SO bloqueia o submit, e nao funciova o codigo, mas com o click consegue basicamente o mesmo efeito
  //$('#form').on('click', function(e) {
  $('#btEnvio').on('click', function(e) {
    var tudoCerto = funcao_que_valida_se_esta_tudo_de_acordo_com_o_que_voce_precisa();
    if (tudoCerto) {
      //pode processar alguma coisinha que precisar aqui, mas o form vai ser enviado logo em seguida
      return true;
    } else {

      //esse return false vai inpedir que o formulario seja enviado, basicamente bloqueia/para o submit
      //logo é um bom lugar para colocar um alert aou qualquer outra coisa que quiser
      alert('Selecione a quantidade de funcionarios');
      return false;
    }
  });

  function funcao_que_valida_se_esta_tudo_de_acordo_com_o_que_voce_precisa() {
    var qtdFunc = parseInt($('#qtdFuncionarios').val());
    return qtdFunc > 0;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form" action="http://blablabla.com.br">
  <select id="qtdFuncionarios">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  <div>
    <!-- aqui vao os dados para o numeor de funcionarios selecionados no select -->
  </div>

  <button id="btEnvio" type="submit">Enviar</button>
</form>