Apesar de ser fundamental validar as informações enviadas por um formulário no lado do servidor, também é importante validar as informações no lado do cliente evitando assim que o usuário tenha que enviar o formulário, que leva algum tempo, para saber que esqueceu de preencher um campo obrigatório.

Existe um plugin para JQuery que nos facilita muito a vida, o jquery-plugin-validation que nos permite uma boa customização nas validações. Vamos aos exemplos.

O modo mais fácil de validar é adicionar um classe ao input que deve ser validado.

Primeiramente baixe o plugin jquery-plugin-validation e adicione na página o arquivo da biblioteca JQuery e o arquivo plugin jquery.validate.js.

Após isso podemos começar com nosso formulário. 

<form method="post" action="mostrar.php" id="form1">
    <div>
        <label for="nome">Nome:</label>
        <input type="text" name="nome" id="nome" class="required" />
    </div>
    <div>
        <label for="sobrenome">Sobrenome:</label>
        <input type="text" name="sobrenome" id="sobrenome" class="required" />
    </div>            
    <div class="submit">
        <input type="submit" />
    </div>
</form>

Repare que foi adicionada a classe required nos inputs que devem ser preenchido, o plugin nos fornece alguma as seguinte validações:

Classes

  • required: Não pode ser deixado em branco.
  • email: Valida E-mail.
  • url: Valida um endereço de um site.
  • date: Valida uma data.
  • number: Valida que o valor informado seja numérico.

Também podemos utilizar os atributos:

  • minlength: Número minimo de caracteres.
  • maxlength: Número máximo de caracteres.

O Javascript para valida o formulário é o seguinte:

$(document).ready(function(){
    $("#form1").validate();
});

Veja o exemplo

Como você irá notar caso um campo não seja válido o plugin irá criar um novo elemento label após o campo do formulário, com a classe error que pode ser estilizado como queira, ma existe um pequeno problema, a mensagem gerada é em inglês e em algumas situações queremos customizar essa mensagem. Veja o exemplo:

$("#form1").validate({
       rules:{
           nome:{
               required:true,
               minlength:5         
           },
           sobrenome:{
               required:true,
               minlength:5         
           }       
       }, 
       messages:{
           nome:{
               required:"Você deve preencher o nome",
               minlength:"O nome deve ter mais que 5 caracteres"
           },
           sobrenome:{
               required:"Você deve preencher o sobrenome",
               minlength:"O sobfenome deve ter mais que 5 caracteres" 
           }   
       }
});

Veja o exemplo

Bom esse é o básico, até mais e obrigado pelos peixes!