-1

Gostaria da ajuda com o validate do jquery, eu estou fazendo um exercício de js e gostaria de incrementar e bloquear o botão de enviar ao exibir a mensagem de validação.Em teoria eu já acabei o exercício só queria adicionar essa função.

código esta aqui: https://21602409cotemigcombr.000webhostapp.com/

1 Resposta 1

0

Utilize os métodos invalidHandler e success do próprio jQuery Validate. O primeiro é executado quando o usuário tenta enviar um formulário inválido; o segundo irá executar toda vez que um campo for validado corretamente.

Exemplo comentado:

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

1
  • Amigo muito obrigado, me ajudou demais. Commented 19/08/2018 às 15:03

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 .