Como posso fazer a validação de formulários pelo Materialize?
Estou tentando utilizar o jquery-validate
para isso mas não funciona, coloco as regras e mesmo quando uma regra é invalida o campo ainda fica verde.
Como posso fazer para que o campo só fique verde quando ele está valido?
Meu código Formulário:
<form id="testeMaterialize">
<div class="row">
<div class="input-field col s6">
<input type="number" id="nome" name="nome" class="validate" minlength="5" required>
<label for="nome" data-error="Preencha o campo Nome" class="active">Nome</label>
</div>
<div class="input-field col s6">
<input type="text" id="numero" name="numero" class="validate" required >
<label for="numero" data-error="Preencha o campo Numero corretamente" class="active">Numero</label>
</div>
</div>
</form>
Meu Javascript:
$(document).ready(function(){
validator = $("#testeMaterialize").validate({
rules: {
nome: {
required: true,
minlength: 5
},
numero: {
required: true,
minlength: 11,
maxlength: 14
}
},
messages: {
nome: {
required: "Por favor preencha o campo Nome",
minlength: "O Campo nome deve ter no minimo 5 caracteres"
},
numero: {
required: "Por favor preencha o campo Numero",
minlength: "O Campo número deve ter no mínimo 11 caracteres",
maxlength: "O Campo número deve ter no máximo 14 caracteres"
}
},
errorElement : 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
});
});