Validação de formulários com HTML5
Com HTML5 podemos ganhar tempo de desenvolvimento e economizar no peso da página.


Quando contruímos aplicações web, é importante levarmos a segurança a sério, especialmente quando essa precisa coletar dados dos usuários.

HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input:  typepattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.

O atributo type


sse 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.
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
Números de telefone
<label for="phonenum">Número de telefone:</label>
<input pattern="^\d{4}-\d{3}-\d{4}$" type="tel">
Valores alfanuméricos
<input pattern="[a-zA-Z0-9]+" type="text">
Usuário do twitter
<input pattern="^@[A-Za-z0-9_]{1,15}$" type="text">
Modo de cor HEX
<input pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" type="text">
Dando algumas dicas
O atributo required
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.
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.
RegEX ^\d{4}-\d{3}-\d{4}$ corresponde ao formato, portanto, o HTML ficaria assim:
O exemplo a seguir corresponde a caracteres alfanuméricos (combinações de letras do alfabeto e números).
Essa expressão regular corresponde a um usuário do Twitter com o símbolo @. Por exemplo: @tech3sky
Esse corresponde a cores hexadecimais. Por exemplo #3b5998 ou #000.
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:
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.
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.
Esperamos ter ajudado até a próxima.

Comentários

Postagens mais visitadas deste blog

Vulnerabilidade do Log4j a pior vulnerabilidade do século