Validar campo jquery ao sair do campo

1 resposta
V

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

1 Resposta

E

vc pode criar métodos js separados e chamalos no evento ‘onblur’, ex:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>  
<script type="text/javascript">
function validaCampoNome() {

    if($("#campoNome").val().trim() == "") {
        $("#campoNome").css("border","1px solid red");
    } 

    else {
	$("#campoNome").css("border","1px solid #555");
    }
}
</script>  

<input type="text" id="campoNome" onblur="validaCampoNome()" />

Lógico, ai vc pode usar esse plugin de válidação que vc usou e adaptar para esse tipo de uso, isso que eu fiz foi um exemplo simples de validação.

Criado 17 de abril de 2012
Ultima resposta 17 de abr. de 2012
Respostas 1
Participantes 2