Introdução ao Parsley.js para validação de formulários

Publicado em 07-01-2015 19:30 | Criado por Luís Cruz | Categoria: Javascript
Click here to view the English version

A validação de formulários, sejam formulários de contactos nos sites ou formulários em aplicações, é essencial.

Longe vão os tempos em que um formulário era submetido e, não sendo aceite no servidor, os dados eram removidos do formulário e o utilizador tinha de introduzir tudo novamente (talvez não tão longe, uma vez que ainda existem sites e aplicações assim). 

Neste post apresentamos o Parsley.js, um plugin Javascript, assente no jQuery, leve e personalizável.

 

O Parsley pode ser aplicado através de atributos HTML ou através de Javascript. No exemplo seguinte, mostramos como verificar se um campo está preenchido bastando adicionar o atributo data-parsley-validate ao formulário e o atributo required (HTML5) no campo. Se tentarem submeter o formulário sem preencher o campo, será apresentada a mensagem "This value is required".

See the Pen Parsley 2.0 - Validação DOM by Luís Cruz (@milz) on CodePen.

Pessoalmente, prefiro aplicar o Parsley ao formulário através de Javascript uma vez que o pode ser necessário Javascript para validações personalizadas (ver validações avançadas com o Parsley). Para aplicar o Parsley através de Javascript, podemos usar o seguinte código:

See the Pen Parsley 2.0 - Validação via Javascript by Luís Cruz (@milz) on CodePen.

 

O Parsley disponibiliza várias validações de raiz. A lista completa pode ser vista na documentação sendo algumas das mais comuns:

AtributoDescrição
required
data-parsley-required
data-parsley-required="true"
Obriga a que o campo a ser validado esteja preenchido.
type="email"
data-parsley-type="email"
Verifica se o valor do campo é um email válido.
data-parsley-type="number" Verifica se o valor do campo é numérico.
data-parsley-length="[10, 50]" Verifica se o tamanho do campo introduzido está entre 10 e 50
data-parsley-equalto="#outroinput" Verifica se o valor introduzido neste campo é igual ao #outroinput. Útil para confirmação de passwords

No exemplo seguinte apresentamos um formulário de contacto, onde é possível ver várias validações em uso. A versão 1 do Parsley disponibilizava o CSS com o plugin. A partir da versão 2 (lançada em abril de 2014) o CSS deixou de ser incluído. Ainda é possível usar o CSS antigo (uma vez que as classes se mantiveram) e, para isso, podem descarregar o código em http://parsleyjs.org/src/parsley.css

See the Pen Parsley 2.0 - Formulário de contacto by Luís Cruz (@milz) on CodePen.

 

Para concluír esta introdução, resta-nos indicar de que forma é possível usar traduções das mensagens de erro e como é possível definir algumas mensagems. Para alterar a localização (i18n) das mensagens é necessário incluír o Javascript da tradução pretendida. Os ficheiros das internacionalizações estão no GitHub, em https://github.com/guillaumepotier/Parsley.js/tree/master/src/i18n

Depois de descarregarem o(s) ficheiro(s) pretendido(s), existem duas formas de alterar as traduções:

  1. Carregar as traduções antes do Parsley. Podem carregar tantas traduções quantas forem necessárias. Depois de incluirem o Parsley, é necessário indicar qual a tradução que pretendem usar através do código window.ParsleyValidator.setLocale('pt-br');. No exemplo seguinte, são incluidas as traduções de Português (brasileiro) e Espanhol. Depois de carregado o plugin é usada a tradução pt-br.
    <script src="jquery.js"></script>
    <script src="i18n/pt-br.js"></script>
    <script src="i18n/es.js"></script>
    <script src="parsley.min.js"></script>
    <script type="text/javascript">
    	window.ParsleyValidator.setLocale('pt-br');
    </script>
  2. O outro método é carregar as traduções depois de carregar o plugin. Neste caso, ficará ativa a última tradução carregada (neste exemplo, fica ativo o Espanhol).
    <script src="jquery.js"></script>
    <script src="parsley.min.js"></script>
    <script src="i18n/pt-br.js"></script>
    <script src="i18n/es.js"></script>

Se, ainda assim, pretenderem alterar a mensagem por defeito, é possível fazê-lo através da aplicação do atributo data-parsley-error-message no input pretendido. No exemplo seguinte incluímos a tradução Português-Brasileiro e definimos mensagens especificas para os campos Nome e Mensagem.

See the Pen Parsley 2.0 - Formulário de contacto by Luís Cruz (@milz) on CodePen.

 

Clique para ler sobre validações personalizadas no Parsley.js