Sylverio » Arquivo » Validação de formulário com JQuery

Validação de formulário com JQuery

Postado por Carlos Fernando Sylverio | Categoria Programação, Tecnologia | 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