Usando o jquery-validation com HTML5 data-attribute

O jQuery Validation Plugin é uma ótima alterativa para validação de formulários do lado do cliente. Ele possui uma API para construção de regras de validação e exibição de mensagens levemente documentada pelo autor, e infelizmente sua documentação não aborda o uso dos atributos de dados do HTML5.

Então, neste artigo vamos explorar tais recursos e documentar de uma maneira legível e sintetizada sua aplicação com HTML5 utilizando o data-attribute.

Um exemplo básico

Se você não tem idéia do que estou falando, abaixo segue um exemplo simplificado da utilização do jQuery Validation Plugin num formulário web em JS Fiddle:

Pode-se notar que, no elemento de entrada temos um atributo chamado data-rule-required, definido como true. Apenas chamar a função .validate() no ID do formulário, irá aplicar a validação à esses data-attributes e executar os métodos de validação do plugin.

Como mencionado anteriormente, há também uma API para a aplicação dessas mesmas regras. Consulte a documentação completa.

Formato das regras

Para adicionar novas regras a seus elementos, deve-se seguir este formato:

data-rule-[regra-separada-por-hífen]="true"

Aqui estão mais alguns exemplos:

  • Obrigatório: data-rule-required="true"
  • Email: data-rule-email="true"
  • Comprimento mínimo: data-rule-minlength="6"

Formato das mensagens

Por padrão, o plugin já adiciona algumas mensagens, mas você pode customizá-las para cada data atribute. Basta especificar sua mensagens para cada regra aplicada ao atributo de dados, seguindo esse formato:

data-msg-[regra-separada-por-hífen]="Informe sua mensagem"

Aqui estão alguns exemplos:

  • Obrigatório: data-msg-required="Campo obrigatório."
  • Email: data-msg-email="Informe um email válido."

Lista de regras

Se você quer saber exatamente quais validadores estão disponíveis, aqui está uma lista deles no código fonte do core do plugin, apesar de não ter testado todas as regras, elas foram extraídas das validações aplicadas com base nesse núcleo do plugin.

  • data-rule-required="true"
  • data-rule-email="true"
  • data-rule-url="true"
  • data-rule-date="true"
  • data-rule-dateISO="true"
  • data-rule-number="true"
  • data-rule-digits="true"
  • data-rule-creditcard="true"
  • data-rule-minlength="6"
  • data-rule-maxlength="24"
  • data-rule-rangelength="5,10"
  • data-rule-min="5"
  • data-rule-max="10"
  • data-rule-range="5,10"
  • data-rule-equalto="#password"
  • data-rule-remote="validatation-endpoint.php"

Algumas regras adicionais, baseadas no core do plugin:

  • data-rule-accept=""
  • data-rule-bankaccountNL="true"
  • data-rule-bankorgiroaccountNL="true"
  • data-rule-bic=""
  • data-rule-cifES=""
  • data-rule-creditcardtypes=""
  • data-rule-currency=""
  • data-rule-extension=""
  • data-rule-iban=""
  • data-rule-integer="true"
  • data-rule-ipv4="true"
  • data-rule-ipv6="true"
  • data-rule-lettersonly="true"
  • data-rule-nowhitespace="true"
  • data-rule-pattern=""
  • data-rule-phoneUK="true"
  • data-rule-phoneUS="true"
  • data-rule-require_from_group=""
  • data-rule-strippedminlength=""
  • data-rule-time=""
  • data-rule-time12h=""
  • data-rule-url2=""
  • data-rule-zipcodeUS="true"
  • data-rule-ziprange=""

Espero que este artigo lhe seja proveitoso.

A validações do lado do cliente é muito útil, ela auxilia a economizar recursos do servidor e banda da rede, no entanto, ela não é suficiente para todos os tipos de sistemas web permitindo a abertura de brechas de segurança.

Dependendo da sua abordagem, se não estiver seguro em utilizar uma client side validation, entre em contato conosco para uma consultoria mais aprofundada!