Olá pessoal, comecei a usar Jquery esses dias e já notei a enorme facilidade de criar bons efeitos com pouco código.
Como a maioria das páginas que não possuem validação por AJAX são validadas com javascript resolvi postar um plugin do Jquery aqui pra vocês com o passo a passo.
Primeiro faça o download da versão mais rescente do Jquery no site oficial http://jquery.com/
Feito isso vamos fazer o download do plugin jQuery plugin: Validation no site http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Agora dentro do <head></head>, vamos colocar a biblioteca Jquery e o plugin Validation com o segunte código.
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery.validate.js" type="text/javascript"></script>
Agora Criaremos uma pequena regra CSS para estilizar as mensagens de error.
<style type="text/css">
* { 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; }
</style>
Depois de adicionar o Jquery e o Plugin, ainda dentro de <head></head> vamos adicionar as instruções para a validação do nosso formulário.
<script type="text/javascript">
$(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"
}
}
});
});
</script>
E agora nosso formulário em HTML.
<form id="formularioContato" method="post" action="">
<label>Nome</label>
<input name="campoNome" type="text" value="" />
<label>E-mail</label>
<input name="campoEmail" type="text" value="" />
<label>Mensagem</label>
<textarea name="campoMensagem"></textarea><br />
<input type="submit" class="submit" value="Enviar" />
</form>
Veja o exemplo nesta página http://jquery.bassistance.de/validate/demo/
Lembrando que este é um exemplo simples, só para uma introdução, é possível também adicionar funções para validação de CPF e CNPJ neste plugin.
Dúvidas ou sugestões entre em contato.
0 comentários:
Postar um comentário