Como Validar Formulários com o Bootstrap Validator

validacao-formularios-bootstrap-validatorComo você já deve saber, o Bootstrap não tem um mecanismo de validação por padrão (e nem deve).

Ele até tem as classes auxiliares para identificar os campos inválidos, mas a lógica deles deve ser implementada por você.

Neste tutorial vai aprender a fazer a validação de um formulário simples, usando a biblioteca Bootstrap Validator.


Passo 1: Pegue a lib do Bootstrap Validator

O Validator é um plugin para Bootstrap que fornece validação automática de formulários que pode ser personalizada e usa, normalmente, os atributos padrão do HTML5. Ele também fornece um nível de user experience bastante discreto, para não atrapalhar seu usuário.

Este plugin foi criado por Cina Saffary, sobre a licença MIT.

Você pode obter uma cópia do Bootstrap Validator no GitHub do desenvolvedor, neste link:

https://github.com/1000hz/bootstrap-validator

Quando abrir, basta clicar no link Download ZIP, na parte direita, ou fazer um fork do repositório.

Os arquivos que você deve usar estão na pasta /dist. São eles o validator.js e o validator.min.js.

Copie, ou mova, o arquivo validator.min.js para a pasta /js do seu projeto.


Passo 2: Referencie a lib no seu Projeto

Agora, você deve fazer a chamada do Bootstrap Validator na sua página. Para isso, coloque o script a seguir no final da página, antes do </body>:

<script src="js/validator.min.js"></script>

É importante colocar este script no final, depois das chamadas do Bootstrap e do jQuery, porque ele depende desses para funcionar.


Passo 3: Crie o Formulário para  o Validator

Agora podemos criar um formulário simples, para colocar as validações. O código pode ser assim:

Perceba que tem um data-toggle="validator" na tag <form>. É esse atributo que ativa a lib de validação que vamos usar.

A validação também pode ser ativada via Javascript, quando for necessário:

$('#formExemplo').validator();

Este formulário apareceria assim, na tela:

Form Simples com Bootstrap

Ainda não temos as regras de validação nos campos. Então, vamos agora colocar regras em cada um…


Passo 4: Adicione as Validações

A validação de um campo é feita definindo o tipo dele, alguns atributos de validação, e uma mensagem de notificação.

Para mostrar a mensagem, você deve colocar uma div com as classes help-block e with-errors, depois do campo:

<div class="help-block with-errors"></div>

Veja como o código do formulário deve ficar agora:

A maior parte das validações é executada de acordo com os atributos do HTML5 e o tipo.

Vamos entender cada campo desse, e como eles foram validados:

  • No campo Nome foi colocado apenas um atributo required. Isso é padrão do HTML5 e a lib usa automaticamente para formatar o visual de erro. (linha 4)
  • No campo E-mail, colocamos o type como “email”, o required e também um atributo data-error. Esse atributo é usado pelo Validator para exibir uma mensagem personalizada. A validação é feita em cima do type e do required. (linhas 9 e 10)
  • No campo Senha,  colocamos o type como “password”, o required e também um atributo data-minlenght. Esse atributo é usado pelo Validator para exigir um valor mínimo de dígitos. A validação é feita em cima do required, e do data-minlenght. (linhas 16 e 17)
  • No campo Confirme a Senha,  colocamos o type como “password”, o required e também um atributo data-match e um data-match-error. Esses atributos são usados pelo Validator para verificar se um campo é igual ao outro, pelo ID. A validação é feita em cima do required, e do data-match. (linhas 23 e 24)
  • Por fim, no campo Marque este Item, colocamos o required e um atributo data-error. Esses dois você já viu para que servem.

Quando o usuário clicar no botão de submit, que é o botão Enviar, o Validator irá verificar cada um destes campos e suas regras.

Se houver erros, ele irá aplicar os estilos do Bootstrap e mostrar as mensagens de erro que houverem.

Lembre-se que essa validação é somente a nível de front-end! Você deve fazer outra validação no backend, também. Ao tentar enviar o form inválido, a tela deve ficar assim:

Validação Formulário com Bootstrap Validator


Opcional: Crie suas Próprias Validações

Bom, cada formulário tem suas validações específicas. O Validator permite que você crie algumas validações diferentes do que é mais comum.

Basicamente, basta você seguir as regras do Bootstrap. É importante, também, que cada campo fique em uma div com .form-group separada, para que as mensagens de erro sejam mostradas corretamente.

As regras de validação padrão são definidas pelos componentes do formulário, usando os atributos do HTML5:

  • type="email"
  • type="url"
  • type="number", junto com os adicionais de tamanho max e min.
  • pattern="Reg(ular )?Exp(ression)?" (para campos do tipo text, search, tel, url ou email)
  • required

Você também pode usar atributos personalizados da API do HTML5:

  • data-match="#idDoInput" para garantir que valores sejam iguais
  • data-minlength="5" para forçar um valor mínimo de dígitos
  • data-remote="/endereco/do/validador/remoto" para fazer uma requisição AJAX para verificar se o campo é válido ou não.

Este último é para os casos mais complexos, como CPF, endereço físico, etc. Você pode consultar a documentação da lib para entender como implementá-lo. E a resposta deve ser um 200 OK se o campo for válido, ou 4xx caso contrário.


Finalizando…

Neste tutorial você viu um exemplo de como fazer validação de formulários com o Bootstrap Validator. É uma lib não oficial, mas que ajuda muito no desenvolvimento.

Se você tiver alguma dúvida, ou gostou do tutorial, basta deixar um comentário logo abaixo.

Um abraço e até a próxima!

22 comentários em “Como Validar Formulários com o Bootstrap Validator

Adicione o seu

  1. PRECISO DE AJUDA:
    O botão ficou inacessível, ou seja, ao colocar o data-toggle=”validator” na tag form o botão fica indisponível, mesmo com todos os campos preenchidos.
    Busquei informações mas não encontrei até o momento, alguém pode me ajudar?

  2. Olá, estou com um problema, no meu form tenho um botao pra adicionar novos campos, só q na função que adicionar novos campos tenho algumas outras logicas tambem, por exemplo uma logica d contador pra sempre q adicionar um novo campo ele acrescentar o id, por exemplo id_1, id_2 etc.
    e sei q tenho q usar o $(‘#form’).validator(‘update’) para que o form reconheça os novos campos, porem o $(‘#form’).validator() só funciona se colocado logo em seguida do meu append na função, e tenho q colocar a logica do contador após o append tambem senao n funciona, resumindo, ou a logica do contador funciona ou o validator(‘update’).
    Poderia me ajudar?

Deixe um comentário

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑