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.
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.
<form method="post" action="words.php">
<input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
<input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
<input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
<textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
<input type="submit" value="[ Enviar Mensagem ]" />
</form>
input type="text"
para manipulação de dados de texto simples- input
input type="email"
valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido. - input
input type="tel"
para validar telefones que em conjunto com o atributo pattern aceita uma expressão regular, e que veremos a seguir. - O atributo pattern
pattern
da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular. pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}"
indica2 digitos espaço 4 digitos tracinho 4 ou 5 digitos
(valida telefones fixos com DDD e 8 dígitos e celulares com DDD e 8 ou 9 dígitos.)
O atributo required
é 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.
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.