Entendendo o que é validação de formulário HTML5 e rótulo de entrada flutuante

A implementação da validação de formulário desempenha um papel vital na prevenção de usuários mal-intencionados de inserir texto sem sentido nos campos do formulário. Além disso, impede que usuários inexperientes insiram informações incorretas no formulário.

Claro, você não gostaria de coletar dados incorretos de usuários de maneira insegura. Portanto, é imprescindível que você defina as regras de validação dos formulários.

Durante anos, usamos o código JavaScript complexo e TL;DR (ou seja, muito longo; não lido) para implementar a validação de formulário no lado do cliente. Felizmente, com o lançamento da "validação de formulário HTML5", agora podemos adicionar validações a um formulário com o mínimo de JavaScript.

Embora a versão mais recente do HTML ofereça vários benefícios, no entanto, o mais importante é que ele vem com muitos novos campos de entrada e atributos essenciais para validar um formulário sem a necessidade de escrever um código de validação JS (abreviação de JavaScript) complicado.

Mas lembre-se de que os usuários podem facilmente se frustrar ao preencher um formulário, especialmente quando descobrem que os dados inseridos estavam errados, o que pode aumentar ainda mais sua frustração. Mas, graças ao HTML5, adicionar rótulos de entrada flutuantes pode validar os dados do formulário ao mesmo tempo em que os usuários preenchem o formulário. Dessa forma, os usuários saberão imediatamente caso estejam cometendo algum erro nos campos de entrada.

Por exemplo, abaixo está uma imagem postada no Dribble por Matt Smith que demonstra como o padrão de rótulo flutuante funciona quando aplicado a um formulário:

Esta postagem aborda como você pode implementar rótulos de entrada flutuantes ao adicionar validações a um formulário HTML5.

Mas Antes de Começar

A maioria de vocês pode querer saber o processo de validação de um formulário HTML5 primeiro. Afinal, nem todos vocês podem ter experiência em escrever código de validação para um formulário HTML5. Além disso, é possível que você não tenha conhecimento dos campos de entrada e atributos recém-introduzidos no HTML5.

Uma visão geral detalhada da validação de formulário HTML5

Quando você planeja validar um formulário, é recomendável começar primeiro com a validação do lado do servidor. E, caso você seja um bom web designer, adicione a validação do lado do cliente, ajudando seus usuários a obter feedback instantâneo, estejam eles preenchendo o formulário com os dados corretos ou não. Por exemplo, fornecer feedback imediato aos usuários quando eles estiverem inserindo dados no campo de endereço de e-mail permitirá que eles saibam que o endereço de e-mail inserido é válido.

Um dos grandes recursos do HTML5 é que ele ajuda a implementar a validação do lado do cliente sem depender dos scripts. Em vez disso, você pode realizar essa tarefa fazendo uso de “atributos de validação" em seus elementos de formulário. Mais importante ainda, você só precisa adicionar o atributo “obrigatório” para um campo de entrada enquanto o resto é tratado pelo seu navegador.

Aqui está um exemplo que explicará o uso do atributo obrigatório para adicionar validação a um campo de entrada:

Name: <input type="text" name="yourname" required>

A linha de código acima informa ao seu navegador que o nome do campo INPUT deve ser considerado obrigatório (ou seja, não pode ser deixado em branco).

Como você pode ver, um marcador vermelho é exibido na caixa de texto correspondente ao campo de entrada ‘Seu nome’. Mas assim que algum texto é inserido no campo de entrada de nome, o marcador se transforma em uma marca de seleção indicando que o valor inserido é válido.

Além de <input type="text">(ou seja, os tipos de entrada de texto), o HTML5 agora suporta várias novas opções de entrada, como pesquisa, e-mail, tel, data e hora, etc. Em palavras simples, com HTML5 podemos escrever a linha de código abaixo:

<input type="text" name="email">

em algo como:

<input type="email" name="email">

Os navegadores de desktop renderizarão o código acima como qualquer campo de texto padrão.

Mais uma coisa importante que gostaria de trazer ao seu conhecimento é que: quando você tentar inserir os atributos como obrigatório ou tipo de entrada=”email” na demonstração do CodePen, mesmo sem nenhum conteúdo, ainda receberá um erro mensagem ao clicar no botão ‘ENVIAR’ sem nenhum endereço de e-mail válido:

No exemplo que discutimos acima, você pode ver que o navegador por padrão exibe uma mensagem de erro. Mas e se você quiser aplicar sua própria regra de validação (ou seja, personalizada) ao valor de entrada? É aqui que o padrão Regex é útil.

Compreendendo os padrões RegEx

Você pode ter visto padrões ao inserir um endereço de e-mail como abc@a. Desnecessário dizer que você deseja que seus usuários insiram um endereço de e-mail real. E, ao especificar sua própria escolha de padrão que corresponda aos seus dados, ajudará a validar o valor inserido. Por exemplo, você pode garantir que o e-mail corresponda ao padrão que contém três caracteres ou mais no final. Para isso, você precisará usar “Atributo padrão” e Expressões Regulares (RegEx).

RegEx é basicamente uma linguagem usada para analisar ou manipular o texto. Na maioria das vezes, as expressões regulares são usadas para realizar operações complexas (como pesquisar e substituir) para melhor formação dos dados do texto. Hoje, você pode encontrar o uso de expressões regulares em quase todas as linguagens de programação e script. O RegEx pode ser usado para validar os dados inseridos nos campos do formulário, aplicando-os nos tipos de entrada utilizando o atributo padrão da seguinte forma:

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Além disso, se ocorrer algum erro de validação, você pode optar por determinar um atributo de título junto com o erro de validação para lançar uma mensagem além de “Formato errado!” usando a linha de código abaixo dada:

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

Lembre-se de que você não precisa escrever nenhum padrão absurdo para cada entrada. Em vez disso, em muitos casos, você só precisará atribuir o atributo necessário a algum tipo específico de dados. Por exemplo, um número acima de 8 será semelhante a:

<input type="number" min="8" required>

Além disso, lembre-se de que nem todos os navegadores fornecem suporte para todos os atributos de validação disponíveis. Tomemos, por exemplo, o navegador Firefox não compatível com o padrão “minlength”.

Benefício de usar validação de formulário HTML5

A maior vantagem de implementar a validação de formulário HTML5 é o feedback instantâneo. Na maioria das vezes, uma espécie de indicação será destacada enquanto o usuário preenche algum campo de um formulário, para informar se o valor digitado é válido ou não.

Agora, quando você insere algo na caixa de texto, a cor da borda muda para verde da seguinte maneira:

No entanto, como você pode ver, há uma desvantagem nessa abordagem. Mesmo ao adicionar um valor inválido (ou incompleto) no campo ‘Nome’, o usuário recebe uma indicação de que o valor está correto. Talvez você possa pensar em adicionar :invalid:not(:empty)ao código. Infelizmente, essa lógica não funcionará com os navegadores, pois eles geralmente consideram os elementos do formulário vazios.

Quer saber o que fazer?

Você pode tentar adicionar o novo pseudo-seletor chamado “:placeholder-shown” no código da seguinte forma:

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Mas a maioria dos navegadores não parece fornecer suporte para espaço reservado mostrado, então é melhor você escrever um script para alternar uma classe quando o campo de entrada estiver vazio ou não. Aqui está o código JavaScript para o mesmo:

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

NOTA: Lembre-se de remover o elemento de espaço reservado da marcação HTML acima.

Agora, quando você executar o trecho de código acima junto com a marcação HTML5, a saída será semelhante a:

Como você pode ver a cor da caixa de texto permanece vermelha até que a validação aplicada ao campo não seja cumprida. E clicar em Enviar exibe uma mensagem de erro ao inserir um nome incompleto.

Porém, assim que o usuário insere o completo (acima de 3 caracteres) a cor da borda da caixa de texto muda para verde.

Como você pode adicionar rótulo de entrada flutuante em HTML5?

E agora, vamos discutir a abordagem de adicionar rótulo de entrada flutuante ao validar seu formulário HTML5. Isso ajuda a melhorar a aparência do formulário. Aqui está a marcação HTML.

Para implementar o padrão de rótulo flutuante, você terá que inserir a tag logo abaixo do <input>elemento em sua marcação HTML:

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

CSS será algo como:

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

E, finalmente, escreva o código JavaScript:

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Resultado:

Você pode implementar vários efeitos ao usar rótulos de entrada flutuantes em HTML5, como:

• Adicione ícones com efeito fade in/out ao validar um formulário HTML5.
• Agite a entrada se os dados inseridos forem inválidos.
• Torne a cor das entradas esmaecida quando forem preenchidas corretamente.

Coisas a considerar

Ao trabalhar na implementação de validações para um formulário HTML5, você precisa estar familiarizado com:

1. Suporte ao navegador: os formulários HTML5 funcionam perfeitamente nos navegadores modernos e no IE10+. Embora a versão 9 do IE e as versões mais antigas não suportem pseudo-seletores de validação, impedindo você de estilizar o formulário, ele ainda funcionará corretamente.
2. Advertência: Uma coisa que você não pode executar ao aplicar validações a um formulário HTML5 é estilizar as mensagens de validação. Isso porque, tal funcionalidade é desativada pelos navegadores.

Palavras Finais

A implementação de validações em um formulário é crucial para adicionar uma camada extra de segurança ao seu site. Isso ocorre porque evita que usuários mal-intencionados adicionem texto malicioso como o valor em seus campos de formulário. Além disso, fornecer feedback instantâneo aos usuários quando eles estiverem inserindo alguma entrada em um campo de entrada validado do formulário ajudará a aprimorar sua experiência. Afinal, eles não precisarão perder tempo reconhecendo que erraram no preenchimento do formulário. Porém, validar um formulário usando apenas JavaScript pode ser um desafio. É aqui que a validação de formulário HTML5 vem em seu socorro.

Ao aplicar validações a um formulário usando HTML5, você não precisa escrever longas linhas de código JS complexo. Em vez disso, você pode implementar regras de validação de formulário com codificação JavaScript mínima. Mais importante ainda, muitos novos recursos estão disponíveis com a validação de formulário HTML5, como rótulo de entrada flutuante que torna o formulário mais bonito, incentivando os usuários a enviar o formulário.