O que poderia ser mais fácil do que configurar um formulário HTML que captura endereços de e-mail, digamos, para um boletim informativo ou notificações? Digitar um endereço de e-mail nesse formulário, é claro, e depois lembrar o endereço incorreto de todos os formulários de inscrição que estão por vir.
Se você quiser validar os endereços de e-mail inseridos em seu formulário, mas evitar ajustes e scripts complicados, o HTML5 permite que você dependa do navegador - sem esforço e sem usar o JavaScript.
Validar endereços de email com HTML5
Para que os navegadores dos usuários validem os endereços de e-mail à medida que forem inseridos no formulário da Web em HTML:
- Certifique-se de usar o HTML5.
- Especifique o elemento de entrada do formulário de endereço de email como tipo "email". (Veja abaixo um exemplo)
Navegadores que não reconhecem type = "email" devem (e, até onde se pode dizer, todos irão) tratar o campo de entrada como um campo type = "text" comum.
Advertências de validação de endereço de e-mail em HTML5
Observe que a validação de endereço de e-mail em HTML só funcionará em navegadores que suportem HTML5 e validem a entrada de elementos de formulário. Para outros navegadores e backup, você ainda pode validar endereços de e-mail usando PHP, por exemplo.
Os navegadores que oferecem suporte à validação de endereço de e-mail HTML5 incluem o Safari 5+, o Google Chrome 6+, o Mozilla Firefox 4+ e o Opera 10+. O Safari 5 e o Google Chrome 6-8 não aceitarão entradas de endereço de e-mail inválidas, mas, ao contrário dos outros navegadores, não ajudarão o usuário a corrigir o erro.
Exemplo de validação de endereço de email em HTML5
Para envolver os navegadores dos usuários para validar endereços de e-mail com HTML5, use o seguinte código, por exemplo:
