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

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