Validação de formulários com jQuery Validation

form_validation

form_validation Validar formulários é uma das tarefas mais desgastantes no processo de desenvolvimento de software, entretanto, as aplicações web são os que mais precisam de atenção, pois temos algumas limitações que implicam na sua usabilidade: como internet, rede, diferentes tipos de navegadores e etc.

Nenhum usuário gosta de submeter seu formulário, aguardar alguns segundos, e só depois descobrir  que algum campo não foi preenchido corretamente, nos piores casos são as informações genéricas, onde é preciso decifrar qual foi o motivo do erro. Para facilitar nossas vidas e a dos usuários o pessoal da  http://bassistance.de/ desenvolveu o jquery validator , sendo este um excelente plugin jquery para validação de formulários client side.

Jquery Validation ou validação condicional do Html5

Hoje em dia o html5 não é nenhuma novidade e para cada projeto surge a mesma dúvida, devo utilizar a api do html5 ou jquery validator? Para responder este pergunta devemos levar me consideração alguns requisitos do seu projeto:

  1. Seus usuários utilizam apenas os browsers mais atuais.
  2. Seu projeto segue a risca um padrão de interface para validação dos formulários.

O problema principal de utilizar unicamente a validação do html5 está no fato, de ainda muitos usuários manterem seus browsers desatualizados, também temos o problema de cada browser tratar as validações de modo independente, sendo assim, você verá comportamentos diferentes para validações do html5 em cada navegador. Caso você queira utilizar a validação do html5 e manter uma compatibilidade com os browsers mais antigos, você pode adicionar uma pitada de moderniz no seu projeto.

Não é possível utilizar as validações do html5 em conjunto com o jquery validation, pois, o plugin inclui o atributo novalidate=”novalidate” no seu formulário, fazendo com que, a validação do seu formulário via api do html5 seja ignorada pelo navegador.

Primeiros passos com o jquery validation

Jquery validation depende do framework jquery, portanto, é necessário possui-lo no seu projeto, caso ainda não tenha é possível baixar-lo aqui. Nesse momento precisamos apenas incluir o plugin em nossa aplicação, isso é possível de duas maneiras, baixando a biblioteca no site do desenvolvedor ou utilizando o serviço de CDN.

Incluindo o jquery validation, a partir do código fonte em nosso projeto.

Caso opte por utilizar o serviço de cdn não será necessário baixar o plugin, apenas informar a url do serviço de cdn que o hospeda.

Compreendendo o funcionamento do plugin

Antes de mais nada, precisamos entender detalhadamente o funcionamento do plugin, o exemplo abaixo demostra um simples uso do jquery validation.

Nota-se que apenas foi informado o seletor do formulário, que nesse caso pode ser qualquer seletor jquery valido, dai então é invocado o método validate que será responsável pela validação do nosso formulário. O método validate recebe como parâmetro um objeto literal do javascript onde estes serão os parâmetros que definirão o comportamento do plugin na sua aplicação. Daremos atenção apenas a três atributos em especial, que já são mais que suficientes para utiliza-lo no seu dia a dia.

Caso deseje conhecer as opções disponíveis do método validate consulte esse link.

1. Debug pode não parecer importante, mas o atributo debug é extremamente útil quando estamos incluindo nossas regras de validações e realizando testes; pois quando esse atributo é definido como true, ele evita que o formulário seja submetido, mesmo no caso, em que todos os campos foram preenchidos corretamente, já em caso de erro dispara todas mensagens de debug  no console do browser.

2. rules este é o parâmetro mais importante, pois é nele que definimos as nossas regras de validações. O parâmetro rules espera receber as regras de validação para cada campo do seu formulário, no qual o seu identificador é o atributo name, já o seu valor é um objeto que contenha todas as regras de validação para o seletor em questão. Caso o atributo name do campo do seu form não satisfaça a sintaxe para declaração de variáveis em javascript, é possível utilizar string ao invés de literal, conforme exemplo abaixo.

Regras de validação disponíveis:

  • required – Indica que o campo é de preenchimento obrigatório, um espaço em branco elimina essa validação.
  • remote – Valida um campo a partir de uma validação remota. Ex: verificar se um e-mail já está cadastrado no sistema
  • minlength – Determina a quantidade mínima de caracteres.
  • maxlength – Determina a quantidade máxima de caracteres.
  • rangelength – Especifica que um elemento deve possuir uma faixa de caracteres.
  • min – Determina um valor mínimo.
  • max – Determina umvalor máximo máximo.
  • range – Determina uma faixa de valor.
  • email – E-mail
  • url – Url, com ou sem http
  • date – Determina que o valor informado seja uma data válida.
  • dateISO – Obrigatoriamente o formato da data deve ser um padrão iso .
  • number – Valor deve ser de números decimais. Aceita caractere “.”(ponto)
  • digits – Apenas dígitos.
  • creditcard – Números de cartões de crédito
  • equalTo – Compara o valor do campo com valor de outro elemento. Ex: Verificar senha e repita a senha são iguais.

3. messages O plugin possuí mensagens de validação padrão para cada regra, sendo estas no idioma inglês, porém também é possível incluir um pacote que traduz as mensagens para o idioma padrão do seu sistema, consulte os locations disponíveis para o jquery validator.

Entretanto, mesmo utilizando o location para o seu idioma, algumas mensagens podem ser personalizadas para cada regra de validação. Veja o exemplo abaixo:

Validando o primeiro formulário

O código abaixo é um exemplo de como validar o seu formulário com jquery validor, utilizando apenas os conceitos descritos nesse post, aspectos avançados foram deixados de lado para uma melhor compreensão do funcionamento do plugin.

Para mais informações, consulte a documentação do plugin.