O HTML5 trouxe diversas possibilidades e, principalmente facilidades para os desenvolvedores. Uma delas é relacionada a validação de formulários. O que antes era feito com algum tempo e JavaScript, hoje pode ser feito diretamente no HTML e em um tempo muito menor. Por isso, navegando pela internet achei no SitePoint esse artigo do Agbonghama Collins, um desenvolvedor nigeriano, que escreveu de forma rápida e direta alguns pontos da validação de formulários utilizando HTML5 e, resolvi traduzi-lo para nós.
—
Quando contruímos aplicações web, é importante levarmos a segurança a sério, especialmente quando essa precisa coletar dados dos usuários.
Não confiar em ninguém, é uma norma máxima de segurança, portanto, nunca confie que o usuário vá inserir valores corretos e válidos no formulário. Por exemplo, em um campo de e-mail, em vez de inserir um endereço de e-mail válido, o usuário pode digitar um e-mail inválido ou dados mal-intencionados, obviamente, ignorando a indicação da requisição do campo.
Quando se trata de validar valores de campos de formulários, isso pode ser feito no lado do cliente (navegador) e no lado do servidor (usando a linguagem que preferir).
No passado, validações no client-side só podiam ser feitas usando JavaScript ou algumas bibliotecas de frameworks (como o plugin jQuery validation). Mas isso está mudando, ou melhor, já mudou, porque a validação agora pode ser feita usando HTML5, sem a necessidade de escrever um código complexo de JavaScript para isso.
Validação de formulário com HTML5
HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input: type, pattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.
Vamos examinar esse atributos para ver como eles podem nos ajudar na validação de um formulário.
O atributo type
Esse atributo indica o tipo de controle de entrada de dados como o popular <input type="text"> para manipulação de dados de texto simples.
Alguns controles de formulários herdam sistemas de validação sem a necessidade de escrever qualquer código. Por exemplo, <input type="email"> valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido. Se o campo tiver um dado inválido, o formulário não vai poder ser submetido até que esse erro seja corrigido.
Teste o exemplo nesse link digitando um endereço de e-mail válido (Link do CodePen original).
Há também o <input type="number">, <input type="url"> e <input type="tel"> para validar números, URLs e telefones respectivamente.
Nota: Os formatos de números de telefone variam de país para país devido à inconsistência nos tamanhos e formatos. Como resultado, a especificação não define um algoritmo para validá-los, portanto não é suportado nos navegadores web no momento da escrita.
Lembre-se, a validação pode ser feita para o campo telefone em conjunto com o atributo pattern que aceita uma expressão regular, e que veremos a seguir.
O atributo pattern
O atributo pattern vai deixar os desenvolvedores felizes, principalmente aqueles que trabalham com front-end. Este atributo especifica um formato (na forma de expressão regular do JavaScript) em que o valor do campo é testado.
Expressões regulares são uma linguagem usada para analisar e manipular texto. Elas são frequentemente utilizadas para executar operações complexas de search-and-replace, e para garantir que os dados de texto estão corretos.
Hoje em dia, as expressões regulares estão incluídas na maioria das linguagens de programação, assim como em muitas linguagens de script, editores, aplicações, bancos de dados e ferramentas de linha de comando.
Expressões regulares (RegEX) oferecem um poderoso, conciso e flexível meio para encontrar string ou textos com caracteres particulares, palavras ou padrões de caracteres.
Ao passarmos uma string RegEX como valor para o atributo pattern, conseguimos definir qual valor é aceitável pelo campo do formulário e também informar ao usuário de possíveis erros.
Vamos ver alguns exemplos de como usar expressões regulares para validação de dados em campos de formulário.
Números de telefone
Como mencionado, o input tel não é totalmente suportado pelos navegadores web devido à inconsistência no formato dos números de telefone em diferentes países.
Por exemplo, no meu país, a Nigéria, o formato do telefone é xxxx-xxx-xxxx, que seria algo como 0803-555-8205.
A RegEX ^\d{4}-\d{3}-\d{4}$ corresponde ao formato, portanto, o HTML ficaria assim:
Veja aqui um exemplo. (Link do CodePen original).
Valores alfanuméricos
O exemplo a seguir corresponde a caracteres alfanuméricos (combinações de letras do alfabeto e números).
Veja aqui um exemplo. (Link do CodePen original).
Usuário do twitter
Essa expressão regular corresponde a um usuário do Twitter com o símbolo @. Por exemplo: @tech3sky
Veja aqui um exemplo. (Link do CodePen original).
Modo de cor HEX
Esse corresponde a cores hexadecimais. Por exemplo #3b5998 ou #000.
Veja aqui um exemplo. (Link do CodePen original).
Dando algumas dicas
Para fornecer ao usuário uma descrição da pattern, ou um erro reportando que o valor inserido está inválido, você pode utilizar o atributo title, dessa maneira:
Veja aqui um exemplo. (Link para o CodePen original).
Se você é novo com expressões regulares, você pode consultar esse documento no WebPlatform para lhe dar uma ajuda inicial. No entanto, na maioria dos casos, você pode usar o Google para ajudar a procurar a expressão regular que você quer, ou até mesmo utilizar uma ferramenta para ajudá-lo.
O atributo required
Esse é um atributo booleano usado para indicar que um determinando campo de formulário é obrigatório para o envio do mesmo. Ao adicionar esse atributo a um campo de formulário, o navegador obriga o usuário a inserir dados naquele campo antes de enviar o formulário.
Essa validação substitui a validação básica de formulário implementada com JavaScript, tornando as coisas um pouco mais úteis e nos poupando algum tempo de desenvolvimento.
Exemplo: <input name="my_name" required="" type="text"> ou <input name="my_name" required="required" type="text"> para compatibilidade XHTML.
Todos os links de exemplos acima utilizam o atributo required, assim você pode testá-los tentando submetê-los sem digitar nada nos campos.
Resumo
O suporte dos navegadores para as features de validação de formulários é bem grande, e você pode utilizar polyfills quando necessário.
Vale a pena lembrar que confiar apenas no navegador (client-side) para a validação pode ser perigoso, pois isso pode ser contornado por um usuário mal-intencionado ou por bots.
Nem todos os navegadores suportam HTML5 e nem toda entrada de texto enviada para seu script virá do formulário. Isso significa que validação do lado do servidor também deve estar antes do envio dos dados para o processamento do servidor.
—
Texto traduzido e adaptado do artigo escrito pelo Agbonghama Collins em 06 de junho de 2014. Tradução autorizada pelo autor.
Dei um fork em todos os exemplos do CodePen colocando o texto em português, mas mantive os links para os originais também.
Qualquer erro ou sugestão de melhoria na tradução, é bem vinda! 🙂
