Validando formulários com o plugin jQuery Validade

Hoje apresento a vocês o jQuery Validade, um excelente plugin jQuery desenvolvido pela equipe http://bassistance.de.

Você pode fazer o download deste plugin diretamente no site do desenvolvedor (citado acima) ou então no repositório GitHub (https://github.com/jzaefferer/jquery-validation).

Se você utiliza o GIT como controlador de versão, poderá executar o comando abaixo para clonar o repositório oficial do plugin:

`1`	$ git clone https://github.com/jzaefferer/jquery-validation.git

Para utilizar este plugin você precisa utilizar o jQuery.

Mão na massa

Adicione as linhas abaixo dentro da tag head do seu documento HTML.

1
2

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

Agora vamos criar um formulário, e adicionar alguns campos. Confira abaixo:

<form id="formulario" action="" method="post">
  Nome:  <input type="text" name="nome" id="nome" /><br />
  Email: <input type="text" name="email" id="email" /><br />
  Senha: <input type="password" name="senha" id="senha" /><br />
  Confirmação de Senha: <input type="password" name="confirmar_senha" id="confirmar_senha" /><br />
  Termos de Contrato: <input type="checkbox" name="termos" id="termos"/><br />
  <input type="submit" value="Cadastrar" />
</form>

Agora iremos realizar a validação do formulário que acabamos de criar, para isto adicione as seguintes linhas de código:

<script type="text/javascript">
$(document).ready(function(){
  $('#formulario').validate({
    rules: {
      nome: {
        required: true,
        minlength: 3
      },
      email: {
        required: true,
        email: true
      },
      senha: {
        required: true
      },
      confirmar_senha: {
        required: true,
        equalTo: "#senha"
      },
      termos: "required"
    },
    messages: {
      nome: {
        required: "O campo nome é obrigatório.",
        minlength: "O campo nome deve conter no mínimo 3 caracteres."
      },
      email: {
        required: "O campo email é obrigatório.",
        email: "O campo email deve conter um email válido."
      },
      senha: {
        required: "O campo senha é obrigatório."
      },
      confirmar_senha: {
        required: "O campo confirmação de senha é obrigatório.",
        equalTo: "O campo confirmação de senha deve ser identico ao campo senha."
      },
      termos: "Para se cadastrar você deve aceitar os termos de contrato."
    }
  });
});
</script>

Agora basta executar o seu documento HTML em seu navegador para ver o resultado final.

Espero que tenham gostado, se houver dúvidas quanto a utilização do plugin, deixe um comentário.