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"
}
});
});
21 comentários para "Validação de Formulários com jQuery"
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.
Cara ficou mt legal, o Jquery tem inúmeras funcionalidades, isso é mt masssa. Vlw.
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!
Pô bacanaa cara .. essa biblioteca aê facilita msmo a vida de nois programers
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
DEU ERRO NA LINHA DE : ;
DEU ERRO NA LINHA
Olá Jefferson!
Qual linha deu o erro?
abraços,
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.
Muito Bom
Poderia me informar como faço para mudar as messages para alert ao inves de css
Abraços.
Cara, muito bom isso e por sinal muito simples com jquery!
Valeu, abraços.
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”
}
});
});
Rodrigo,
você precisa ver se existe um option vazio nesse campo select e se o value desse option segue a regra do validador…
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.
Legal Charles! Fico feliz em ter ajudado…
abraço,
[...] 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. [...]
[...] 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. [...]
Eu fiz aqui exatamente como está falando…
Os códigos:
$(function() {
// valida o formulário
$(‘#cadastrar_posts’).validate({
// define regras para os campos
rules: {
titulo: {
required: true,
minlength: 2
},
postagem: {
required: true,
minlength: 2
}
},
// define messages para cada campo
messages: {
titulo: “Preencha o seu nome”,
postagem: “Preencha seu e-mail de contato”,
}
});
});
Titulo
Texto
Já fiz a chamada do jQuery e do Validate também… Mas ele não está validando, sabe me informar o erro?
O formulário tá nesse link: http://pastie.org/pastes/2020995/text
Bom zqui não funcionou ele só reteve o formulário mas nada de validar
Excelente tutorial !!!