Block a button after displaying jquery validate message?

Question

I would like help with the jquery validate, I am doing a js exercise and would like to increment and block the send button when displaying the validation message. In theory I already finished the exercise just wanted to add this function.

code this one: https://21602409cotemigcombr.000webhostapp.com/

Answer 1

Use the methods invalidHandler and success of own jQuery Validate. The first runs when the user tries to send an invalid form; the second will run every time a field is correctly validated.

Commented example:

$(document).ready(function() {
  const validate = $("#form").validate({
    rules: {
      cpf: {
        required: true,
        minlength: 14
      },
      email: {
        required: true

      },

      nome: {
        required: true
      },

      celular: {
        required: true,
        minlength: 14
      },

      nasci: {
        required: true
      }


    },
    messages: {
      cpf: {
        required: "<font color='red'>Por favor, digite o CPF</font>",
        minlength: "<font color='red'>O CPF deve ter 11 digitos</font>"
      },
      email: {
        required: "<font color='red'>Insira seu email</font>",
        email: ""
      },
      nome: {
        required: "<font color='red'>Insira seu nome</font>"
      },
      celular: {
        required: "<font color='red'>Digite seu número de celular</font>",
        minlength: "<font color='red'>O número nao é valido</font>"
      },

      nasci: {
        required: "<font color='red'>Digite a data de nascimento</font>"
      }

    },
    
    /* Bloqueia o botão caso ao aparecer mensagens de erro */
    invalidHandler: function(event, validator) {
      $(validator.currentForm).find("button:submit").prop("disabled", true)
    },
    
    /* Habilita o botão caso não haja campos inválidos */
    success: function(label) {
      if (validate.numberOfInvalids() <= 1) {
        $("#form").find("button:submit").prop("disabled", false)
      }
    }
  });
  
  $("#form button:reset").click(function() {
    $("#form").find("button:submit").prop("disabled", false)
  });
});

function fMasc(objeto, mascara) {}
function fMascEx() {}
function mTel(tel) {}
function mCNPJ(cnpj) {}
function mCPF(cpf) {}
function mCEP(cep) {}
function mNum(num) {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<h2>Validação</h2>
<form id="form" name="form" class="form-horizontal" action="">

  <div class="form-group">
    <label class="control-label col-sm-2" for="cpf">CPF</label>
    <div class="col-sm-10">
      <input class="form-control" onkeydown="javascript: fMasc( this, mCPF );" maxlength="14" type="text" name="cpf" id="cpf" />
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" name="email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Nome:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="nome" name="nome">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="celular">Celular:</label>
    <div class="col-sm-10">
      <input class="form-control" onkeydown="javascript: fMasc( this, mTel );" maxlength="14" id="celular" name="celular">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="nasci">Data de Nascimento:</label>
    <div class="col-sm-10">
      <input type="date" class="form-control" id="nasci" name="nasci">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-info">Enviar</button>
      <button type="reset" class="btn btn-danger">Limpa</button>
    </div>
  </div>
</form>