Willian Fernandes

Validação de Formulários com jQuery

Comente »

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"
        }
    });
});

Veja o exemplo!

27 comentários para "Validação de Formulários com jQuery"

  1. # Helder Robalo disse:
    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:
    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:
    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:
    20/02/2009 às 16:48:36

    Pô bacanaa cara .. essa biblioteca aê facilita msmo a vida de nois programers

  5. # jefferson disse:
    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:
    25/03/2009 às 16:49:15

    DEU ERRO NA LINHA DE : ;

  7. # jefferson disse:
    25/03/2009 às 16:49:45

    DEU ERRO NA LINHA

  8. 25/03/2009 às 22:22:19

    Olá Jefferson!
    Qual linha deu o erro?

    abraços,

  9. # jefferson disse:
    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:
    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:
    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:
    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. 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. 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. 13/11/2009 às 22:05:33

    Legal Charles! Fico feliz em ter ajudado…

    abraço,

  16. 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. [...]

  17. 03/08/2010 às 09:38:43

    [...] 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. [...]

  18. # Ygor disse:
    05/06/2011 às 01:37:00

    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?

  19. # Ygor disse:
    05/06/2011 às 01:40:04

    O formulário tá nesse link: http://pastie.org/pastes/2020995/text

  20. # @danielsilva1986 disse:
    29/11/2011 às 10:29:32

    Bom zqui não funcionou ele só reteve o formulário mas nada de validar

  21. # Gustavo disse:
    30/11/2011 às 13:44:58

    Excelente tutorial !!!

  22. # Walfredo de Sá disse:
    01/03/2012 às 11:50:47

    Me tira uma dúvida. E se eu quiser criar uma condição(if) como faço? Por exemplo, eu quero que o usuário selecione uma opção do combo(select id=cidade) caso ele tenha selecionado a opção Cidade(radio name=cidade id=cidade).

    Se ele seleciona o radio(cidade) forçar ele a selecionar uma opção do combo(select cidade)?

  23. # Vinicius Santos disse:
    19/03/2012 às 13:56:24

    Olá amigo, esse script só faz a validação de conteúdo no campo de email. Ou existe alguma class dentro do plugin que tenha uma expressão regular, para a validação do email.
    Desde já, muito obrigado.

  24. # Daniel disse:
    11/06/2012 às 10:08:35

    o problema é que esse plugin carrega os campos de validação pelo “name” do formulário eu preciso de um que seja pelo id e não pelo “name”, portanto para mim esse validador não funciona de forma eficiente.exemplo

    Seu nome:
    Seu e-mail:
    Sua idade:

    Agora todo mundo vai me perguntar porque eu não muda o formulário não é? porque eu descobri que no asp vbscript quando você deixa o “name” de todos os campos iguais se você der o comando request.form(‘meuform’) ele lista com ponto e vírgula todos os campos exemplo:
    Response.write(request.form(‘meuform’) o que vai aparecer é:
    Daniel, daniel@seuemail.com, 26
    Depois é só usar a função split() para separar esses dados numa matriz e inserir no banco de dados.

  25. # josivanio disse:
    12/06/2012 às 10:58:10

    como validar meu for esse é o meu código.

    Nome:

    Data nascimento:

    Endereço:

    Numero:

    Bairro:

    Cidade:

    Estado:

    Selecione o Estado
    Acre
    Alagoas
    Amapá
    Amazonas
    Bahia
    Ceará
    Distrito Federal
    Espirito Santo
    Goiás
    Maranhão
    Mato Grosso do Sul
    Mato Grosso
    Minas Gerais
    Pará
    Paraíba
    Paraná
    Pernambuco
    Piauí
    Rio de Janeiro
    Rio Grande do Norte
    Rio Grande do Sul
    Rondônia
    Roraima
    Santa Catarina
    São Paulo
    Sergipe
    Tocantins

    Email:

    MSN Mensseger:

    URL Facebook:

    Login:

    Senha:

    Confirmação de Senha:

    obsevações:

  26. # Lincoln disse:
    28/08/2012 às 16:06:13

    Cara, valeu, obrigadao!

  27. 29/10/2012 às 08:03:54

    Walfredo,

    if (…) {
    // faz uma coisa
    } else {
    // faz outra coisa
    }

    Use JavaScript ;)

Deixe um comentário

*

(obrigatório)Não é aceito código HTML: adicione-o no pastie.org e poste apenas o link.