Os navegadores têm recursos integrados de validação para verificar se os usuários inseriram os dados no formato correto. Para ativar esses recursos, use os elementos e atributos corretos. Além disso, é possível aprimorar a validação do formulário com CSS e JavaScript.
Por que você deve validar seus formulários?
No módulo anterior, você aprendeu como ajudar os usuários a evitar a necessidade de reinserir informações em formulários. Como você pode ajudar os usuários a inserir dados válidos?
É frustrante preencher um formulário sem saber quais campos são obrigatórios ou as restrições deles. Por exemplo, você digita um nome de usuário e envia um formulário, mas descobriu que os nomes de usuário precisam ter pelo menos oito caracteres.
Você pode ajudar os usuários com isso ao definir e comunicar regras de validação.
Ajudar os usuários contra campos obrigatórios ausentes por acidente
Você pode usar HTML para especificar o formato correto e as restrições para os dados inseridos em seus formulários. Você também precisa especificar quais campos são obrigatórios.
Tente enviar este formulário sem inserir dados.
Você recebeu uma mensagem de erro anexada a <input> informando que o campo é obrigatório?
Isso acontece devido ao atributo required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Você já aprendeu que pode usar muitos outros tipos, por exemplo, type="email".
Vejamos um <input> de e-mail obrigatório.
Tente enviar este formulário sem inserir dados. Há alguma diferença em relação à demonstração anterior? Agora digite seu nome no campo do e-mail e tente enviar. Você verá outra mensagem de erro. Como isso é possível? Você receberá uma mensagem diferente porque o valor inserido não é um endereço de e-mail válido.
O atributo required informa ao navegador que o campo é obrigatório.
O navegador também testa se os dados inseridos correspondem ao formato do type.
O campo de e-mail mostrado no exemplo só será válido se não estiver vazio e se os dados inseridos forem um endereço de e-mail válido.
Ajudar o usuário a inserir o formato correto
Você aprendeu a tornar um campo obrigatório. Como você informaria ao navegador que um usuário precisaria inserir pelo menos oito caracteres em um campo de formulário?
Faça um teste. Após a alteração, não será possível enviar o formulário se você inserir menos de oito caracteres.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
O nome do atributo é minlength.
Defina o valor como 8 e você terá a regra de validação desejada.
Se quiser o contrário, use maxlength.
Comunicar suas regras de validação
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Confirme se todos os usuários entendem suas regras de validação.
Para isso, conecte o controle de formulário a um elemento que explique as regras.
Para fazer isso, adicione um atributo aria-describedby ao elemento com o id do formulário.
Atributo de padrão
Às vezes, você quer definir regras de validação mais avançadas.
Novamente, você pode usar um atributo HTML.
Ele é chamado de pattern, e você pode definir uma expressão regular como o valor.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Aqui, apenas letras minúsculas são permitidas. O usuário precisa inserir pelo menos dois e não mais de vinte.
Como mudar a pattern para também permitir letras maiúsculas?
Faça um teste.
A resposta correta é pattern="[a-zA-Z]{2,20}".
Adicionar estilos
Agora você já sabe como adicionar validação em HTML. Não seria ótimo se você também pudesse definir o estilo dos controles de formulário com base no status de validação? Isso é possível com CSS.
Como definir o estilo de um campo obrigatório de formulário
Mostre ao usuário que um campo é obrigatório para que ele interaja com o formulário.
É possível definir o estilo dos campos required com a pseudoclasse CSS :required.
input:required {
border: 2px solid;
}
Estilo dos controles de formulário inválidos
Você se lembra do que acontece quando os dados inseridos pelo usuário são inválidos? A mensagem de erro anexada ao controle do formulário é exibida. Não seria ótimo adaptar a aparência do elemento quando isso acontecesse?
Use a pseudoclasse :invalid para adicionar estilos a controles de formulário inválidos.
Além disso, há também a pseudoclasse :valid para estilizar elementos de formulário válidos.
Há outras maneiras de adaptar os estilos com base na validação. No módulo sobre CSS, você vai aprender mais sobre como estilizar formulários.
Validação com JavaScript
Para melhorar ainda mais a validação dos seus formulários, use a API JavaScript Constraint Validation.
Fornecer mensagens de erro significativas
Você já aprendeu que as mensagens de erro não são idênticas em todos os navegadores. Como você pode mostrar a mesma mensagem para todos?
Para fazer isso, use o método
setCustomValidity()
da API Constraint Validation.
Vamos ver como isso funciona.
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Consulte o elemento em que você quer definir a mensagem de erro personalizada.
Detecte o evento invalid do elemento definido.
Assim, você define a mensagem com setCustomValidity().
Este exemplo mostra a mensagem Please enter your name. se a entrada for inválida.
Abra a demonstração em diferentes navegadores. A mesma mensagem será exibida em todos os lugares. Agora remova o JavaScript e tente de novo. As mensagens de erro padrão vão aparecer de novo.
Você pode fazer muito mais com a API Constraint Validation. Você vai encontrar uma análise detalhada sobre o uso da validação com JavaScript em um módulo posterior.
Como validar em tempo real
É possível adicionar validação em tempo real em JavaScript detectando o evento onblur de um controle de formulário e validar a entrada imediatamente quando um usuário sair de um campo de formulário.
Clique no campo do formulário na demonstração, digite "Web" e clique em outro lugar na página.
Você verá a mensagem de erro nativa para minlength abaixo do campo do formulário.
Saiba mais sobre como implementar a validação em tempo real com JavaScript em um próximo módulo.
Teste seu conhecimento
Teste seus conhecimentos sobre como validar formulários
Qual atributo você usa para tornar os controles de formulário obrigatórios?
requiredneededessentialobligatoryÉ possível definir suas próprias mensagens de erro?
message.:invalid.Uma <input> com type="email" e o atributo required pode ser enviada: