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!

  • Silvio

    Muito bom…

  • Wilton

    Muito obrigado mais uma vez… Agradeço imensamente.

  • Claudenir

    Ótimo tutorial com exemplo bem explicado
    Obrigado

  • Angelo

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

  • paPaulo

    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….

  • Davi

    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?

  • Antonio

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

  • Karina

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

    • 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.

  • Fernando

    Bom dia

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

    Como conserto isso?

    Obrigado

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

  • Leandro

    Parabéns muito bom!!!

  • Excelente, obrigado

  • Muito bom tutorial me ajudou muito! Valeu!

  • Arthur Teodoro Alves de Lima

    comigo não está funcionando.

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

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

  • Marcello

    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?

  • PAULO

    Como faz pro botao de enviar funcione… so acho tutorial ensinando a fazer o formulário mais eu quero q ele funcione

  • Muito bom mesmo

  • José Espinheira

    Muito bom, parabens!

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

Acima ↑