I would like help with the jquery validate, I am doing an exercise in js and would like to increment and block the submit button when displaying the validation message. In theory I already finished the exercise just wanted to add this function. / p>
code is here: link
Use the methods invalidHandler and success of the jQuery Validate itself. The first one is executed 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><scriptsrc="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>