Validar formulários com Parsley.js

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:

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 https://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 mensagens. 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 disponíveis no GitHub

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.

Isto é o básico sobre o Parsley, caso precises de validações mais avançadas dá uma vista de olhos neste post.