Publicado em

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!

18 comentários sobre “Como Validar Formulários com o Bootstrap Validator

  1. Muito bom…

  2. Muito obrigado mais uma vez… Agradeço imensamente.

  3. Ótimo tutorial com exemplo bem explicado
    Obrigado

  4. Compartilhei com meu nicho de desenvolvedores, muito bom o tutorial!

  5. Ola amigo, muito bom mesmo, mais ele não funciona em um modal? tentei de várias maneiras e nada! se poder me ajudar agradeço….

  6. 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?

  7. Muito bom!
    Deu pra ter uma boa idéia de como funciona o bootstrap!

  8. Oi tentei implementar essa validação, fiz tudo passo a passo e quando clico no botão não funcionou. O que pode ser?

    1. Verifica se o jQuery está adicionado na página.

      Você pode usar o Chrome Dev Tools para descobrir o erro: F12 no chrome, e na aba Console ele deve mostrar a mensagem.

      1. Ruan Funcionou, valeu! Sabe dizer algum plugin para máscara do celular? 🙂

  9. Bom dia

    Segui o tutorial, mas caso as senhas não sejam iguais, o formulário ainda é submetido.

    Como conserto isso?

    Obrigado

    1. Você tem que verificar o atributo “data-match” do segundo campo de senha. Ele deve apontar para o ID do primeiro campo de senha.

  10. Parabéns muito bom!!!

  11. Muito bom tutorial me ajudou muito! Valeu!

  12. comigo não está funcionando.

    está dando o erro Uncaught ReferenceError: jQuery is not defined
    at validator.min.js:9

    1. Você precisa adicionar o jQuery antes do Bootstrap e do Validator.

Os comentários estão fechados.