Ola pessoal!
Consegui umas validações em jquery muito legais! So que ela valida apenas quando vai submeter o formulario!
E gostaria que validasse ao sair do campo!
sege o codigo
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
* { font-family: Verdana; font-size: 96%; }
label { display: block; margin-top: 10px; }
label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
p { clear: both; }
.submit { margin-top: 1em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
$(document).ready( function() {
$("#formularioContato").validate({
// Define as regras
rules:{
campoNome:{
// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
required: true, minlength: 2
},
campoEmail:{
// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
required: true, email: true
},
campoMensagem:{
// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
required: true, minlength: 2
}
},
// Define as mensagens de erro para cada regra
messages:{
campoNome:{
required: "Digite o seu nome",
minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
},
campoEmail:{
required: "Digite o seu e-mail para contato",
email: "Digite um e-mail válido"
},
campoMensagem:{
required: "Digite a sua mensagem",
minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
}
}
});
});
<form id="formularioContato" method="post">
<label for="nome">Nome</label>
<input id="nome" name="campoNome" type="text" />
<label for="email">E-mail</label>
<input id="email" name="campoEmail" type="text" />
<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="campoMensagem"></textarea>
<input class="submit" type="submit" value="Enviar" />
</form>
Qual a propriedade que devo alterar ou inserir par que ele valide o input ao sair dele e nao quando clicar em submeter?
Obrigado!!!
Artigo originalmente publicado em 25 de março de 2009 por Thiago Belem: Validação de formulários com jQuery