Um dos pontos mais importantes no desenvolvimento web e que às vezes é negligenciado ou não recebe a devida atenção é o validação de formulário e dos campos que os compõem, essas validações variam de quais valores podem aceitar, seu comprimento até o fato de serem necessários ou não.
Essas validações do lado do cliente no passado, eles eram realizados por Javascript construir funções complicadas para validar alguns campos e obter resultados que nem sempre eram os mais ideais, também foi escolhido para validar o lado do servidor mas isso não proporcionou ao usuário uma experiência amigável, pois primeiro tínhamos que processar os dados e aguardar a resposta do servidor para verificar se todos os nossos dados estavam corretos.
Depois de um tempo de trabalho ordenado Javascript Para realizar todos os tipos de operações do lado do cliente, os frameworks parecem tornar as coisas mais fáceis, entre eles, um dos mais famosos: jQuery; Com uma estrutura predefinida e uma forma mais limpa e otimizada de fazer as coisas, foi possível deixar para trás todas as más práticas e dar ao desenvolvedor uma ferramenta muito mais completa para realizar essas operações, incluindo validações.
Mas mesmo assim jQuery facilitou muitas operações do lado do cliente, algo ainda não havia sido desenvolvido que atacasse diretamente a questão das validações, por isso o plugin do Validador Bootstrap que usa todos os benefícios de jQuery e a estrutura de HTML5 Y CSS3, Bootstrap.
1. Validador Bootstrap
Validador Bootstrap é um plugin baseado em jQuery Y Bootstrap, permite validar formulários, bem como os elementos dentro deles com uma simples inclusão das bibliotecas de plugins e o uso de seus poderosos, mas simples API, isso sem esquecer todas as características que tem, vamos ver algumas delas:
- Integração com fontes e estilos Bootstrap.
- Validações de campos predefinidos que incluem: comprimento do conteúdo, datas, cartões de crédito, telefones, e-mail, entre outros.
- Validações personalizadas para campos.
- Possibilidade de adicionar várias validações por campo.
- Possibilidade de exibir um ícone de feedback de acordo com o resultado da validação.
- Possibilidade de usar mensagens no HTML de acordo com o resultado da validação.
Como pudemos ver, essas características o tornam a opção número um a considerar para a implementação de validações em nossos projetos.
O que precisamos para usá-lo?Para ser capaz de usar Validador Bootstrap precisamos incluir jQuery em sua versão mais recente, de preferência, Bootstrap da sua versão 3.x e os arquivos .css Y .js da livraria. Além disso, precisaremos ter uma instalação de servidor web como Wamp se estamos trabalhando em janelas ou Luminária em Linux.
2. Validadores
Antes de entrar na parte prática deste tutorial, é importante conhecer alguns dos validadores mais importantes que ele utiliza. Validador Bootstrap para o tratamento das validações dentro dos formulários, vejamos:
base64Valida uma string de caracteres codificados em base 64.
entreVerifique se o valor de um campo está estritamente entre dois números dados ou não.
Cartão de créditoValide um número de cartão de crédito.
Encontro: DataValide uma data de acordo com algumas opções entre as quais se destacam o formato, data máxima, data mínima e até por separador.
dígitosRetorna verdadeiro ou verdadeiro se o valor contiver apenas números.
endereço de emailComo o próprio nome indica, ele valida um endereço de e-mail.
regexpValida se o valor fornecido corresponde ou corresponde a uma expressão regular de Javascript.
Esta é apenas uma pequena amostra do repertório completo de validadores que temos em Validador BootstrapPara a lista completa de validadores, podemos entrar aqui e verificar o que melhor se adapta às nossas necessidades:
3. Forma de login
Um dos aspectos mais importantes de qualquer site atual é o forma de login, onde nossos usuários podem entrar com seu nome de usuário e senha em nossa página e desfrutar de vantagens adicionais ao fazer o login.
Validador Bootstrap nos permite validar esses dois campos com algumas linhas simples de código, além disso Bootstrap permite-nos dar-lhe um toque adicional ao permitir-nos implementar uma janela modal de uma forma simples, construindo assim um formulário de login que terá um aspecto profissional e agradável aos olhos do utilizador.
Como não faremos nenhuma modificação no código-fonte de nenhum dos arquivos acima mencionados, iremos incluí-los em seus respectivos CDN, primeiro incluiremos os arquivos .css tanto de Boostrap como de Validador Bootstrap:
Agora vamos incluir os arquivos .js e para ter uma estrutura muito mais limpa, vamos separar o código de nossas validações em um arquivo chamado validator.js:
Então, usaremos os benefícios de Bootstrap para construir nossa janela modal, que apenas aplicando as classes necessárias aos elementos que a compõem, é aplicada a funcionalidade desejada:
forma de login×Vamos ver como fica nosso exemplo até agora quando o executamos no navegador:Conecte-Se
Nome de usuárioSenhaConecte-se
Já temos nossa janela modal funcionando, junto com nosso formulário, agora só temos que incluir as validações com Validador Bootstrap, para isso, vamos inicializar um document.ready em nosso arquivo validator.js e dentro disso vamos chamar o método boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({message: 'Este valor não é válido', feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validando: 'glyphicon glyphicon-refresh' }, campos: {usuário: {validadores: {notEmpty: {mensagem: 'Nome de usuário obrigatório'}}}, senha: {validadores: {notEmpty: {mensagem: 'Senha obrigatória'}}}}}); A primeira coisa que devemos notar neste código é o uso do seletor para inicializar o método, neste caso usamos o ID do formulário que é chamado forma de login, isso para passar pelo Árvore DOM e vá para os itens abaixo dele na hierarquia. Em seguida, definimos uma mensagem geral e os ícones de feedback, de forma a dar um toque visual ao nosso formulário em caso de sucesso ou erro nas validações.
Finalmente temos as nossas validações e como podemos ver à primeira vista se é algo extremamente legível e de uma simplicidade inigualável, indicamos o nome dos campos dos nossos formulários e neste exemplo usaremos uma única validação que será a do campo obrigatório, mas como comentamos podem ser mais de um por campo.
Vamos ver na imagem a seguir como fica nosso formulário quando tentamos enviar as informações sem ter preenchido os campos:
Como vemos o funcionamento de nossas validações e até que as informações sejam inseridas nos campos, o formulário não realizará o enviar Como o botão está desabilitado por padrão, vamos ver na imagem a seguir como fica nosso formulário quando inserimos os dados necessários e os ícones de feedback mudam de acordo:
Em poucos minutos, fomos capazes de construir um formulário de login com suas respectivas validações do lado do cliente, tudo graças a Validador Bootstrap.
4. Formulário de registro
O caso anterior é simples e bastante útil, mas não é o único presente nos empreendimentos, existem formulários de registro que contêm muitos mais campos e as restrições quanto às informações a serem inseridas são diferentes.
Isso no passado representava um problema, pois dependendo do número de campos, um contador tinha que ser realizado e validado campo a campo e quando este contador atingia um determinado número significava que não havia erros, isso sem esquecer as validações individuais de cada campo, como formatos de data, que aceitará apenas números ou até mesmo o comprimento do campo.
Com Validador Boostrap e seus validadores predefinidos nos ajudam nessa tarefa de forma simples e rápida, vejamos:
Primeiro vamos incluir os arquivos .css Y .js que usamos no exemplo anterior, além disso, incluiremos algumas bibliotecas para poder usar o datetimepicker do Boostrap:
Feito isso, construímos nosso formulário e damos a cada campo um nome apropriado:
Vamos ver a aparência deste formulário em nosso navegador:Formulário de registro
NomesSobrenomesCorreio eletrônicoSenhaData de nascimento*****MasculinoFemininoTelefoneTelefone celularCheck-in
Antes de passar para as validações, é importante que coloquemos nosso datetimepicker para isso, só precisamos incluir as seguintes linhas de código em nosso arquivo validator.js e dê a ele o ID que nosso campo possui no formulário:
$ (function () {$ ('# datetimepicker'). datetimepicker ({pickTime: false});}); Vamos ver a aparência deste plug-in:
Como pudemos ver, o formulário possui campos mistos, incluindo texto, campos de senha, datetimepicker e até botões de opção, mas isso não é um problema para Validador Bootstrap, usaremos nosso mesmo arquivo validator.js para validações, só temos que executar uma nova instância do método boostrapValidator com o ID do novo formulário e inclua o mesmo:
$ ('# registrationForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, campos: {name: {validators: {notEmpty: {message: 'Nome é obrigatório'}}}, sobrenome: {validators: {notEmpty: {message: 'Last name is required'}}}, email: {validators: {notEmpty: {message: ' O e-mail é obrigatório e não pode estar vazio '}, emailAddress: {mensagem:' O e-mail não é válido '}}}, senha: {validators: {notEmpty: {mensagem:' A senha é obrigatória e não pode ser vazia '}, stringLength: {min: 8, message: 'A senha deve conter pelo menos 8 caracteres'}}}, datetimepicker: {validators: {notEmpty: {message: 'A data de nascimento é obrigatória e não pode estar vazia'}, data: {format: 'AAAA-MM-DD', mensagem: 'A data de nascimento não é válida'}}}, *****: {validadores: {notEmpty: {mensagem: 'O **** * é obrigatório '}}}, telefone: {mensagem:' O telefone ou não é válido ', validadores: {notEmpty: {mensagem:' O telefone é obrigatório e não pode estar vazio '}, regexp: {regexp: / [0-9] + $ /, mensagem:' O telefone só pode ser contêm números '}}}, telefono_cel: {mensagem:' O telefone não é válido ', validadores: {regexp: {regexp: / [0-9] + $ /, mensagem:' O telefone só pode conter números '} }},}}); Podemos ver que para as duas primeiras validações são semelhantes ao exemplo anterior, mas quando encontramos o campo de email, vemos que ele possui a validação do campo obrigatório e adicionalmente com o validador endereço de email Verificamos que é um e-mail válido, vamos ver como se comporta essa validação:
Com os selecionador de data Não temos problemas para inserir datas, no entanto, se quisermos receber isso da maneira mais limpa possível, podemos validar o formato como podemos ver na validação a seguir, onde indicamos que o formato deve ser AAAA-MM-DD o que é válido para:
Podemos até validar quantos caracteres a senha pode ter stringLength e a opção de min:
Para finalizar e demonstrar o poder deste plugin vamos validar o telefone, poderíamos usar o validador de dígitos, mas neste caso usaremos algo mais complexo como uma expressão regular e o melhor de tudo é que já temos um validador para que o regexp, Vamos ver como funciona em nosso formulário:
Já tendo testado se todas as nossas validações funcionam corretamente, vamos corrigir todas as informações do nosso formulário e ver como fica com as informações adequadas:
Com isso terminamos este tutorial, no qual aprendemos a usar as validações de Validador Boostrap, um plugin poderoso que não precisa de instalação ou configuração e que nos permite validar nossos formulários de forma rápida e fácil com algumas linhas simples de código.
