Artigo original: Data Validation – How to Check User Input on HTML Forms with Example JavaScript Code
Os formulários estão em todo lugar nas aplicações Web. Algumas delas usam formulários para coletar dados para cadastro. Outras, para coletar endereços de e-mail. Outras ainda usam formulários para preencher informações do usuário em transações on-line, visando uma melhor experiência durante uma compra on-line.
Você pode usar formulários para solicitar um financiamento de carro ou para pedir uma pizza. Por isso, é importante que os dados coletados nesses formulários sejam claros, estejam formatados corretamente e livres de código maliciosos. Esse processo de garantia da qualidade e conformidade dos dados é chamado de validação de formulário.
Nós precisamos executar a validação de formulário toda vez que o usuário envia informações. Temos que garantir que os dados sejam inseridos no formato correto, que sejam do tipo que esperamos (um dia do mês em um campo do tipo data, por exemplo) e que sejam seguros, ou seja, que não contenham código malicioso que possa causar uma injeção de SQL, por exemplo. Além disso, dados inválidos ou incompletos podem causar erros na API do seu sistema.
Quais são os diferentes tipos de validações de formulários?
A validação de formulário pode acontecer no cliente ou no servidor.
Validações no lado do cliente utilizam recursos de HTML5 e JavaScript.
Você já deve ter visto alguns formulários em que você insere um endereço de e-mail inválido e o formulário apresenta um erro "Digite um e-mail válido". Esse tipo imediato de validação geralmente é feito com JavaScript no lado do cliente.
Um outro caso de validação que você já deve ter visto ocorre ao preencher um formulário e inserir as informações de um cartão de crédito. A aplicação pode mostrar uma tela de carregamento e, em seguida, mostrar uma mensagem de erro "Este cartão de crédito é inválido".
Nesses casos, o formulário é processado pelo servidor e retorna com um erro de validação após executar verificações adicionais sobre as informações do cartão de crédito. Esse tipo de validação aonde uma chamada para o servidor é disparada é chamada de validação no lado do servidor.
Quais dados devem ser validados?
A validação do formulário de dados é necessária e deve ocorrer toda vez que você estiver recebendo dados de um usuário. Exemplos disso são:
- Validar o formato de campos como endereço de e-mail, números telefônicos, CEP, nomes e senhas.
- Verificar o preenchimento de campos obrigatórios.
- Verificar se o dado é do tipo esperado para o campo do formulário. Por exemplo, se ele é numérico para o usuário informar o CPF.
- Se o dado é válido. Por exemplo, nome de um país, uma data e etc.
Como realizar a validação do lado do cliente
No lado do cliente, a validação pode ser feita de duas formas:
- Usando HTML5
- Usando JavaScript
Como realizar a validação utilizando HTML5
O HTML5 possui uma série de atributos que ajudam a validar os campos do formulário. Abaixo, alguns exemplos de validação utilizando atributos HTML5:
- Tornar campos obrigatórios:
required - Restringir o tamanho do campo:
minlength, maxlength: quando o tipo de dado for texto
min e max para quando o tipo de dado for numérico.
- Restringir a um tipo de dado
type:
<input type="email" name="multiple>
- Especificando padrões de dados com
pattern:
um padrão regex que os dados do campo do formulário precisam obedecer.
Quando o dado de entrada atende às condições dos atributos, ele recebe a pseudoclasse :valid. Do contrário, ele recebe a pseudoclasse :invalid.
Veja o exemplo abaixo:
<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" id="firstname" required maxlength="45">
<label for="lastname"> Last Name: </label>
<input type="text" name="lastname" id="lastname" required maxlength="45">
<button>Submit</button>
</form>
Neste exemplo, temos dois campos de preenchimento obrigatório: First Name e Last Name. Teste esse exemplo no JSFiddle. Se você tentar enviar o formulário sem preencher esses campos, você receberá uma mensagem pedindo para preenchê-los. Essa validação é feita somente com HTML5.
Como realizar a validação utilizando JavaScript
Quando implementamos a validação de formulário, temos que levar em consideração algumas questões:
- O que é um dado válido? Essa pergunta nos ajuda a identificar o formato, tamanho, obrigatoriedade e tipo de dado.
- O que acontece se o usuário informar dados inválidos? Essa questão nos ajuda a definir o comportamento da validação – se mostramos uma mensagem de erro no topo ou no rodapé do formulário, o nível de detalhamento que deve ter a mensagem de erro, se o formulário pode ser enviado mesmo assim, se devemos registrar o envio de dado inválido etc.
A validação com JavaScript pode ser feita de duas maneiras:
- Validação inline utilizando JavaScript
- Utilizando a API de validação de restrições do HTML5
Validação inline utilizando JavaScript
<form id="form">
<label for="firstname"> First Name* </label>
<input type="text" name="firstname" id="firstname" />
<button id="submit">Submit</button>
<span role="alert" id="nameError" aria-hidden="true">
Please enter First Name
</span>
</form>
const submit = document.getElementById("submit");
submit.addEventListener("click", validate);
function validate(e) {
e.preventDefault();
const firstNameField = document.getElementById("firstname");
let valid = true;
if (!firstNameField.value) {
const nameError = document.getElementById("nameError");
nameError.classList.add("visible");
firstNameField.classList.add("invalid");
nameError.setAttribute("aria-hidden", false);
nameError.setAttribute("aria-invalid", true);
}
return valid;
}
#nameError {
display: none;
font-size: 0.8em;
}
#nameError.visible {
display: block;
}
input.invalid {
border-color: red;
}
Nesse exemplo, nós verificamos se há campos obrigatórios utilizando JavaScript. Se um campo obrigatório não for preenchido, utilizamos o CSS para ressaltar a borda do campo e mostrar uma mensagem de erro.
Os Aria labels são modificados de acordo com a ocorrência do erro. Utilizando CSS para mostrar e inibir a mensagem de erro, nós diminuímos o número de manipulações do DOM (Modelo de Objeto de Documentos, do inglês Document Object Model) necessárias. A mensagem de erro é mostrada logo abaixo do campo que está com erro, tornando a experiência do usuário mais intuitiva.
Utilizando a API de validação de restrições do HTML5
Os atributos do HTML required e pattern podem executar validações básicas. Se houver necessidade para validações mais complexas ou caso queira uma mensagem de erro mais detalhada, você pode usar a API de validação de restrições.
Alguns métodos disponíveis na API:
checkValiditysetCustomValidityreportValidity
As seguintes propriedades são úteis:
validityvalidationMessagewillValidate
No exemplo abaixo, validaremos os campos utilizando métodos do HTML5, como required e length, juntamente com a API de validação de restrições, para mostrar mensagens de erro mais detalhadas.
<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button>
</form>
const nameField = document.querySelector("input");
nameField.addEventListener("input", () => {
nameField.setCustomValidity("");
nameField.checkValidity();
console.log(nameField.checkValidity());
});
nameField.addEventListener("invalid", () => {
nameField.setCustomValidity("Please fill in your First Name.");
});
Não se esqueça da validação no servidor
A validação no lado do cliente não é a única validação que você deve executar. Você também deve validar os dados recebidos do cliente no lado do servidor para garantir que os dados são o que você esperava.
Você também pode utilizar a validação no lado do servidor para executar verificações de regras de negócio que não devem existir no lado do cliente.
Boas práticas de validação
- Sempre utilize a validação no lado do servidor, pois a validação no lado do cliente pode ser manipulada.
- Informe as mensagens de erro juntamente com o campo que causou o erro de validação.
- Na mensagem que informa o erro, forneça exemplos de que dado deve ser usado. Por exemplo, "Endereço de e-mail inválido - formato: teste@exemplo.com".
- Evite usar páginas de erro que envolvam redirecionamento. Isso torna a experiência ruim para o usuário e o força a voltar para uma página anterior para corrigir o formulário, perdendo assim os dados preenchidos.
- Sempre indique quais são os campos obrigatórios.