Validação de formulários com HTML5
Atualmente precisamos ter bastante cuidado com nossas aplicações Web, e um desses cuidados está ligado diretamente aos formulários. Por estarmos lidando com dados dos usuários temos que ter o máximo de cuidado possível, o principal é, não devemos confiar em ninguém.
Segundo a Open Web Application Security Project (OWASP) um dos ataques mais comuns às aplicações Web é a injection, que consiste em o usuário mal-intencionado inserir código malicioso para conseguir ter acesso a dados sensíveis. Qualquer formulário Web pode servir para iniciar esse ataque.
Validações de formulários são feitas no client-side (navegador) e no server-side (servidor). Antigamente as validações no client-side só eram possíveis utilizando JavaScript.
Felizmente, o HTML5 trouxe muitas novidades, uma delas foi a facilidade para validação de formulários no client-side. A vantagem que o HTML5 nos trouxe é que agora temos a opção de fazer validações em formulários sem precisar utilizar Javascript. Isso só foi possível devido aos novos atributos da tag <input>: type, pattern e require.
Com esses atributos podemos fazer verificações dos dados diretamente no navegador, podendo tornar nossas aplicações Web um pouco mais seguras. Vamos explicar um pouco sobre cada uma delas logo abaixo.
Atributo Type
O atributo type indica como serão tratados os dados que devem ser inseridos no campo de entrada, com isso conseguimos utilizar alguns meios para validação dos dados sem precisar utilizar códigos Javascript. Logo, abaixo alguns exemplos:
Utilizando o type=”email” o formulário só irá validar o campo se este for preenchido de maneira correta.
Caso contrário, no campo aparecerá uma mensagem de erro, de acordo com a instalação do navegador do usuário.
O atributo type com o valor color permite selecionar uma cor e atribui a esse dado o valor hexadecimal da cor.
O atributo com o valor number permite que apenas números sejam inseridos.
O atributo com o valor date permite que o usuário escolha uma data. Dependendo do browser um calendário é aberto.
O atributo com o valor url só aceita campos que sejam uma url, por exemplo, https://www.ifpb.edu.br. Caso o tipo de dado não esteja correto, aparecerá uma mensagem de erro.
Atributo Require
O atributo require indica que aquele formulário precisa ser preenchido obrigatoriamente para que possa ser enviado. Caso não seja preenchido, será apresentada uma mensagem de erro.
Essa mensagem de erro ainda pode ser personalizada utilizando o atributo x-moz-errormessage, porém, só é possível até o momento utilizar a personalização da mensagem de erro no Firefox. Caso seja necessária a personalização da mensagem para outro browser, esta só poderá ser feita através de Javascript.
Atributo Pattern
Antes de falar do atributo pattern, temos que explicar algo essencial para utilizá-lo, que é a ideia de expressões regulares. Por se tratar de um assunto complexo será feito um pequeno resumo do que se trata.
Expressões regulares são um meio de identificar padrões em cadeias de caracteres, mais conhecidas como strings. A identificação dos padrões é utilizada para validações, busca e extrações de dados.
O atributo pattern faz uso dessas expressões regulares também conhecidas como RegExp, que é usado em Javascript. Dessa maneira, escolhemos o que deve ser aceito pelo nosso formulário.
Alguns exemplos para demonstrar o pattern funcionando, a atribuição da RegExp "[a-z\s]+" indica que o formulário irá aceitar apenas letras minúsculas entre a e z. Podemos personalizar a mensagem de erro utilizando o title=”mensagem de erro padronizada”, assim indicamos ao usuário como preencher o campo de maneira correta.
Alguns outros exemplos de Regex que podem ser utilizados:
<input type=”text” pattern=”[A-Z\s]+$”> , formulário só aceita letras maiúsculas entre A e Z.
<input type=”text” pattern=”[0–9]+$”> , são aceitos apenas números.
Utilizando required, pattern, type e mais alguns atributos.
Agora que já conhecemos um pouco de cada um dos atributos citados, podemos usar um exemplo de todos juntos. Logo abaixo está um formulário que faz uso desses atributos.
Vamos começar a explicação do código. Por termos abordado antes os atributos type, required e pattern, iremos explicar apenas cada RegExp utilizado. Começando com a linha 12, pattern=”^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+” indica que serão aceitos letras maiúsculas, minúsculas, espaços e letras com caracteres especiais.
Na linha 16, o pattern=”(\d{3}\.\d{3}\.\d{3}-\d{2})|(\d{11})” indica que o campo irá aceitar apenas onze números, como a formatação utilizada no CPF, onde são três conjuntos de três números separados por um ponto e em seguida um traço (-) e mais dois números. Uma pequena observação, vai ser validado apenas o formato do CPF, pois o regex não faz cálculo de validação para verificar se o CPF é verdadeiro ou não.
Na linha 18 não é necessário utilizar o pattern, pois o campo e-mail já faz a validação se o dado recebido for um e-mail.
Na linha 25, o pattern=”(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$” indica que o usuário deve digitar uma senha que tenha uma letra maiúscula, uma letra minúscula, um caractere especial, um número e no mínimo 8 caracteres.
Na linha 29, o pattern=”\([0–9]{2}\)[\s][0–9]{5}-[0–9]{4}” indica que no primeiro campo devem ser colocados dois números entre parênteses seguidos de um espaço, cinco números seguidos de um traço (-) e mais quatro números.
Na linha 32 utilizamos o date para receber uma data, com isso usamos o min=”1938–01–01", que é a data mínima para ser escolhida e o max=”2000–12–31", que é a data máxima para ser selecionada.
Considerações Finais.
Usando HTML5 temos a vantagem de criar formulários personalizados para validar nossos dados, assim o risco de dados incorretos ou algum código malicioso ser inserido no formulário é menor.
Entretanto, ainda podemos ter problemas com browsers muito antigos que não suportam HTML 5. Caso isso aconteça, todas as propriedades são desabilitadas, funcionando apenas o HTML. Deste modo, todos os mecanismos para validação do formulário no client-side não irão funcionar, assim, o usuário poderá inserir qualquer tipo de dado no formulário.
Com isso, temos a necessidade de ter formas de autenticação de dados tanto do lado do client-side quanto do server-side. Caso o browser seja muito antigo, o formulário será validado no server-side. Utilizando dois meios para autenticação diminuímos o risco de ataques do tipo injection em nossos formulários e nossas aplicações Web ficam mais seguras.
