Validação de Formulários com jQuery
Por Willian Fernandes em 07/11/2008 na categoria client-side, desenvolvimento, javascript, jquery
Não é difícil fazer validações de formulários no lado do cliente usando JavaScript. E com jQuery a brincadeira fica ainda mais fácil.
A primeira coisa a fazer é baixar o jQuery: http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
Renomei o arquivo para jquery.js.
Depois precisaremos baixar o plugin de validação, feito em jQuery: http://jquery.bassistance.de/validate/jquery.validate.zip
Descompacte o zip. Utilizaremos apenas o arquivo jquery.validate.js.
Agora vamos ao código!
O Formulário
<form id="form-signup" action="#" method="post" accept-charset="utf-8">
<fieldset>
<legend>Formulário de Cadastro</legend>
<label>
Nome:
<input type="text" name="nome" />
</label>
<label>
E-mail:
<input type="text" name="email" />
</label>
<label>
Sexo:
<select name="sexo">
<option value="">Selecione</option>
<option value="F">Feminino</option>
<option value="M">Masculino</option>
</select>
</label>
<input type="submit" value="Cadastrar" />
</fieldset>
</form>A Validação JavaScript
// Inicia o validador ao carregar a página
$(function() {
// valida o formulário
$('#form-signup').validate({
// define regras para os campos
rules: {
nome: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
sexo: {
required: true
}
},
// define messages para cada campo
messages: {
nome: "Preencha o seu nome",
email: "Preencha seu e-mail de contato",
sexo: "Informe seu sexo"
}
});
});
Tags: client-side, formulários, javascript, jquery, validação
16 Comentários
Comentários
1# Helder Robalo disse em 13/11/2008 às 10:28:57
Salvou o dia.
Estava pensando em criar um validador do zero, mas é bem mais fácil com jQuery. E o teu tutorial está excelente, bem claro.
2# Marcelo Santos disse em 12/02/2009 às 11:06:06
Cara ficou mt legal, o Jquery tem inúmeras funcionalidades, isso é mt masssa. Vlw.
3# Igor Soares Alves disse em 13/02/2009 às 17:11:41
Cara, muito bom mesmo, mas vc sabe como que posso fazer pra passar o id do formulário por parametro automaticamente quando o submit é ativado(‘clickado’) ? Não to conseguindo aqui…
Flws, vlw!
4# Suvakovysky disse em 20/02/2009 às 16:48:36
Pô bacanaa cara .. essa biblioteca aê facilita msmo a vida de nois programers
5# jefferson disse em 25/03/2009 às 16:48:11
porque no meu caso deu erro” objeto esperado” justo olhe o meu codigo por favor :
Validação com jQuery
<<<<——- AQUI DEU ERRO !!!!!!
$(function(){
// valida o formulário
$(‘#form-signup’).validate({
// define regras para os campos
rules:{ nome: { required: true, minlength: 2 },
email: { required: true, email: true },
sexo: { required: true }
},
// define messages para cada campo
messages: { nome: “Preencha o seu nome”,
email: “Preencha seu e-mail de contato”,
sexo: “Informe seu sexo”
}
});
});
// Inicia o validador ao carregar a página
Formulário de Cadastro
Nome:
E-mail:
Sexo:
Selecione
Feminino
Masculino
6# jefferson disse em 25/03/2009 às 16:49:15
DEU ERRO NA LINHA DE : ;
7# jefferson disse em 25/03/2009 às 16:49:45
DEU ERRO NA LINHA
8# Willian Fernandes disse em 25/03/2009 às 22:22:19
Olá Jefferson!
Qual linha deu o erro?
abraços,
9# jefferson disse em 27/03/2009 às 15:14:17
Consegui consertar o erro e tá funfa muito bem..
Outra dúvida, vc teria alguma exemplo tipo esse para efeitos com jquery?
Tipo abrir e fechar uma caixa, esmaecer, etc.
Obrigado pela atenção.
Abs, jefferson.
10# Marcio disse em 15/04/2009 às 10:42:52
Muito Bom
Poderia me informar como faço para mudar as messages para alert ao inves de css
Abraços.
11# Rafael disse em 23/05/2009 às 01:58:03
Cara, muito bom isso e por sinal muito simples com jquery!
Valeu, abraços.
12# Rodrigo Nascimento disse em 11/07/2009 às 10:12:47
Cara muito bom mas eu estou tendo um pequeno problema com um campo criado dinamicamente com PHP aí vai o código:
Categorias:
–SELECIONE–
<?
for($i = 0; $i
<option value=”getIdcategoria()?>”>getNome())?>
$(function() {
// valida o formulário
$(‘#formPosts’).validate({
// define regras para os campos
rules: {
txtTitulo: {
required: true,
minlength: 2
},
txtTexto: {
required: true,
minlenght: 30
},
categorias: {
required: true
}
},
// define messages para cada campo
messages: {
txtTitulo: “Preencha o título do Post”,
txtTexto: “Preencha o texto do Post”,
categorias: “Informe a Categoria”
}
});
});
13# Willian Fernandes disse em 11/07/2009 às 20:49:22
Rodrigo,
você precisa ver se existe um option vazio nesse campo select e se o value desse option segue a regra do validador…
14# Charles Oliveira disse em 13/11/2009 às 17:29:40
Esse validade.js é muito fácil de usar, excelente dica rapaz.
Eu já havia lido num site em inglês, realmente,
seu post sanou toda e qualquer duvida.
15# Willian Fernandes disse em 13/11/2009 às 22:05:33
Legal Charles! Fico feliz em ter ajudado…
abraço,
16# WillianFernandes.com.br » Como gerar validações client-side em projetos Rails usando jQuery Validator com ClientValidations disse em 29/01/2010 às 14:43:56
[...] Sendo assim, resolvi fazer meu próprio plugin, chamado Client Validations. O que ele faz é basicamente ler as validações definidas no Model e traduzi-las para JavaScript usando jQuery Validator. [...]