Os navegadores têm recursos integrados de validação para verificar se os usuários inseriram os dados no formato correto. Você pode ativar esses recursos usando os elementos e atributos corretos. Além disso, você pode 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 a ajudar os usuários a evitar ter que repetir insira as informações novamente 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 desses campos. Por exemplo, você insere um nome de usuário e envia um formulário, mas descobre que os nomes de usuário precisam ter pelo menos oito caracteres.
Para ajudar os usuários, defina regras de validação e as comunique.
Ajudar os usuários com a falta acidental de campos obrigatórios
Você pode usar HTML para especificar o formato correto e as restrições para os dados inseridos em seus formulários. Também é necessário especificar quais campos são obrigatórios.
Tente enviar este formulário sem inserir nenhum dado.
Você vê uma mensagem de erro anexada ao <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 é possível usar muitos outros tipos, por exemplo, type="email".
Vamos conferir o e-mail obrigatório <input>.
Tente enviar este formulário sem inserir nenhum dado. Há alguma diferença em relação à demonstração anterior? Digite seu nome no campo de e-mail e tente enviar. Você verá outra mensagem de erro. Como isso é possível? Você vai receber outra mensagem 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 de 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.
Ajude o usuário a inserir o formato correto
você aprendeu a tornar um campo obrigatório. Como você instruiria o navegador de que o usuário deve inserir pelo menos oito caracteres em um campo de um formulário?
Experimente a demonstração. Após a alteração, você não poderá enviar o formulário se 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 você 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 entenderam as 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 padrão
Às vezes, você quer definir regras de validação mais avançadas.
Novamente, é possível usar um atributo HTML.
Ele se chama pattern, e você pode definir
expressão regular como 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 deve inserir pelo menos dois e não mais do que vinte.
Como você mudaria a pattern para permitir letras maiúsculas?
Faça um teste.
A resposta correta é pattern="[a-zA-Z]{2,20}".
Adicionar estilos
Você aprendeu a adicionar validação em HTML. Não seria ótimo se você também pudesse estilizar os controles do 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 antes da interação com o formulário.
É possível estilizar campos required com a pseudoclasse CSS :required.
input:required {
border: 2px solid;
}
Definir o estilo dos controles de formulários inválidos
Você se lembra do que acontece se os dados inseridos pelo usuário forem inválidos? A mensagem de erro anexada ao controle de formulário aparece. Não seria ótimo adaptar a aparência do elemento quando isso acontecesse?
É possível usar a pseudoclasse :invalid
para adicionar estilos a controles de formulário inválidos.
Além disso, também existe a pseudoclasse :valid para estilizar elementos de formulário válidos.
Há outras maneiras de adaptar seus estilos com base na validação. No módulo sobre CSS, você vai aprender a estilizar formulários.
Validação com JavaScript
Para aprimorar ainda mais a validação de seus formulários, você pode usar o API JavaScript Constraint Validation.
Exiba mensagens de erro significativas
Você já aprendeu que as mensagens de erro não são idênticas em todos os navegadores. Como mostrar a mesma mensagem para todos?
Para isso, use o método
setCustomValidity()
método 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.
Lá você definiu a mensagem com setCustomValidity().
Este exemplo vai mostrar a mensagem Please enter your name. se a entrada for inválida.
Abra a demonstração em navegadores diferentes. você verá a mesma mensagem em todos os lugares. Remova o JavaScript e tente de novo. Você verá as mensagens de erro padrão novamente.
Você pode fazer muito mais com a API Constraint Validation. Você encontrará uma visão detalhada de como usar validação com JavaScript em um módulo posterior.
Como validar em tempo real
Para adicionar validação em tempo real em JavaScript, detecte o evento onblur de um controle de formulário.
e validar a entrada imediatamente quando um usuário sai de um campo do formulário.
Clique no campo do formulário na demonstração.
digite "Web" e clicar em outro lugar da página.
Você verá a mensagem de erro nativa para minlength abaixo do campo do formulário.
Saiba mais sobre como implementar validação em tempo real com JavaScript em um módulo a seguir.
Teste seu conhecimento
Teste seus conhecimentos sobre a validação de formulários
Qual atributo você usa para tornar os controles de formulários obrigatórios?
requiredneededessentialobligatoryÉ possível definir suas próprias mensagens de erro?
message.:invalid.Um <input> com type="email" e o atributo required pode ser enviado: