Validação de formulário com JQuery

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 28-10-2009

1

Validation é um plugin do framework jQuery que permite fazer a validação de formulários de várias maneiras.
Neste post vou demonstrar como realizar algumas validações em um formulário utilizando o este plugin.

Para é necessário fazer o download do jQuery plugin: Validation

Pronto agora que temos todos os arquivos necessário, devemos incluir na tag de nosso exemplo o seguinte trecho de código:

<script language="JavaScript" src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-validate/jquery.validate.js" type="text/javascript"></script>

Ainda dentro da tag head, inserimos o trecho de código que fará a validação de nosso formulário:

$(document).ready( function() {
    $("#cadastro").validate({
        // Define as regras
        rules:{
            nomeCliente:{
                required: true, 
                minlength: 2
             }
         },
         // Define as mensagens de erro para cada regra
         messages:{
              nomeCliente:{
                  required: "Digite o seu nome.",
                  minLength: "O seu nome deve conter, no mínimo, 2 caracteres."
              }
          }
    });		
});

Agora é só inserir o código HTML do formulário a página:

<form id="cadastro" method="post" action="">
    <p><label>Nome:</label><input type="text" id="nome_cliente" name="nomeCliente" /></p>
     <input type="submit" value="Enviar" />
</form>

Observe que as regras e mensagens aplicadas a caixa de texto são referênciadas pelo nome do elemento (atributo name) e não pelo id.

Dessa forma, podemos fazer validações de formulário, de uma forma simples e rápida. Mais informações e métodos de valições podem ser entrados na documentação oficial do JQuery.

Para quem conhece css, o código gerado ao apresentar a mensagem contem o atributo class com o valor error, que pode ser usado para aprimorar o layout do formulário.

<form id="cadastro" action="" method="post">
    <p><label>Nome:</label><input id="nome_cliente" class="error" type="text" name="nomeCliente"/>
            <label class="error" for="nome_cliente" generated="true">O seu nome deve conter, no mínimo, 2 caracteres.</label>
     </p>
     <input class="submit" type="submit" value="Enviar"/>
</form>

Enjoy ;-)

Apresentando o JQuery

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 11-02-2009

1

Há um bom tempo tudo está convergindo para web, e com isso surgem coisas interessantes, é o caso de uma bibliotéca de JavaScript chamada JQuery.

Há um ano mais ou menos quando um amigo meu me apresentou fiquei impressionado com a facilidade de codificação, efeitos visuais e possibilidades de uso que essa biblioteca propociona para o desenvolvimento de aplicações Web e continuo me impressionando a cada nova versão.

As principais características do JQuery que se destacam são:

  • Robusto e eficiente mecanismo de acesso a partes da página (DOM).
  • Modifica a aparência da página.
  • Alteração do conteúdo da página.
  • Variedade de eventos para interação com os usuários.
  • Adição de efeitos visuais as páginas.
  • Implementação de Ajax de forma fácil.
  • Simplificação de tarefas comuns em JavaScript.

É uma biblioteca estável e já utilizada por diversas corporações. Em sua página Web é possível acessar sua documentação, especificações, plugins de interface, de forma muito estruturada.

Futuramente falerei mais sobre essa biblioteca e criarei alguns exemplos de sua utilização.

Até mais :-P