Validação de formulário com Foundation

Criar validação de formulário com o Foundation é uma tarefa rápida. Os scripts de validação do framework ficam no componente chamado abide. Foundation utiliza o atributo required da HTML5 para fazer a validação em Formulários.

Primeira coisa que devemos fazer para iniciar o processo de validação é adicionar o atributo data-abide no elemento form do nosso formulário que receberá as validações. Em um segundo momento aplicar o atributo requered e se necessário o atributo pattern. Ambas são especificações previstas da HTML5, não são componentes do foundation.

O framework utiliza uma API padrão da HTML5 para cria as validações: atributo requered, tipos de input e o atributo pattern.

• Atributo requered: insira o atributo requered aos elementos de formulário que serão de preenchimento obrigatório.
• Tipos de input: podemos passar que tipo de dado será digitado no campo, por exemplo: type="url"
• Atributo pattern: insira o atributo pattern no elemento para definir restrições do que o usuário pode ou não digitar, por exemplo: criar um campo obrigatório que aceite apenas números.

<div class="large-12 columns">
  <label for="nome">Nome (*)
    <input type="text" name="nome" id="nome" required pattern="&#91;a-zA-Z&#93;">
  </label>
</div>

No exemplo acima utilizamos o type="text" e tornamos o campo como de preenchimento obrigatório passando uma expressão regular que diz que o campo aceita apenas letras.

Mensagens de erro

O Framework utiliza a classe error que é destinada a mostrar mensagens de erro ao usuário quando ele tenta enviar um formulário que esteja preenchido de forma errada. O conteúdo dessa classe só é mostrado quando os campos do formulário contêm dados inválidos.

Essa classe de erro será aplicada automaticamente no elemento label do HTML da página. Por padrão o elemento é estilizado em vermelho.

Podemos também, além de destacar o label do campo, mostrar uma mensagem de erro ao usuário. Fizemos isso inserindo um elemento small com a classe error logo abaixo do elemento que está sendo validado. Veja o exemplo:

<form data-abide>
 <fieldset>
   <legend>Validação</legend>
    <div class="row">
     <div class="large-12 columns">
       <label for="nome">Nome (*)
         <input type="text" name="nome" id="nome" pattern="&#91;a-zA-Z&#93;" required>
       </label>
     </div>
...

Data-equal – igual a

O framework prevê um atributo data-equal para fazer confirmação de valores, ou seja, verifica se os valores digitados em dois campos são iguais, como por exemplo: senha e confirmação de senha. Perceba, no exemplo abaixo, que o segundo campo – confirmação de senha – utiliza o par atributo/valor data-equalto="senha", onde senha é o id do campo senha.

Através desse atributo/valor estamos dizendo ao navegador que o que for digitado no campo confirme senha tem que ser igual ao que foi digitado no campo senha.

<div class="large-6 columns">
  <label for="senha">Senha (*)
   <input type="password" required name="senha" id="senha">
  </label>
  <small class="error">Preencha este campo com sua senha.</small>
</div>

<div class="large-6 columns">
  <label for="confirmaSenha">Confirme senha (*)
    <input type="password" data-equalto="senha" required name="confirmaSenha" id="confirmaSenha">
  </label>
  <small class="error">Senha difere da fornecida no campo anterior.</small>
</div>

Atributo pattern

No atributo pattern podemos passar um valor em expressão regular escrita em JavaScript com o objetivo de criar um padrão com os dados digitados do usuário. Por exemplo: no atributo pattern posso criar um padrão de entrada que aceite apenas valores digitados acima de três caracteres, somente letras, sem espaço. Ou seja, o formulário não seria enviado com dados fora desse padrão defino.

Importante ressaltar que a HTML5 prevê novos valores para o atributo type, tais como: url, email, namber, etc. que já definem um padrão de preenchimento dos dados, nesse caso não há a necessidade de criar um padrão personalizado com o atributo pattern.

O componente foundation.abide.js fornece algumas opções nativas para serem usadas com o atributo pattern, ou seja, no lugar de usar uma expressão regular você pode usar elas para validar os dados digitados. Então, antes de pensar em criar uma expressão regular para sua validação veja se a mesma já não existe.

Abaixo algumas expressão já definidas pelo Foundation:

Personalizando o pattern

Podemos visualizar as expressões regulares do framework. Abra o arquivo foundation.abide.js que fica em js\foundation. Fique à vontade caso deseje alterar as expressões existentes ou caso queira definir seus próprios padrões personalizados. Para isso é só e adicionar sua expressão regular personalizada no arquivo foundation.abide.js.

Por exemplo, digamos que eu queira que o usuário digite apenas números menores que quatro em um determinado campo. Poderia criar a expressão [0-3-]*$ e adicioná-la no meu arquivo de validação.

Abrindo o arquivo foundation.abide.js logo no seu início você já encontra as expressões de validação padrão do framework. Repare que adicionei uma expressão chamada de teste. Agora no código HTML no lugar de passar uma expressão regular em JS passarei o nome da expressão que eu criei:

Função teste inserida no arquivo foundation.abide.js:

;(function ($, window, document, undefined) {
  'use strict';
  Foundation.libs.abide = {
    name : 'abide',
    version : '5.4.6',
    settings : {
      live_validate : true,
      focus_on_invalid : true,
      error_labels: true, // labels with a for="inputId" will recieve an `error` class
      timeout : 1000,
      patterns : {
        teste:/^[0-3-]*$/,
        dashes_only: /^[0-9-]*$/,
...

Chamando a expressão regular personalizada:

<input type="text" name="nome" id="nome" pattern="teste" required> 

Criei uma página de exemplo para demonstrar a validação utilizada nesse artigo:

Página de exemplo

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.