Módulo 7 de 8
Formulários e Validação
Ao final deste módulo, você será capaz de:
- Ler o valor digitado em um
<input>; - Impedir o recarregamento da página ao enviar um formulário com
preventDefault(); - Validar dados antes de usá-los (campo vazio, tamanho mínimo, formato);
- Exibir mensagens de erro para o usuário.
1. Lendo o valor de um campo de texto
Todo <input> tem uma propriedade .value com o texto digitado pelo
usuário:
// HTML: <input id="campoNome" type="text">
const campoNome = document.querySelector("#campoNome");
console.log(campoNome.value); // o que o usuário digitou2. preventDefault(): evitando o recarregamento da página
Por padrão, ao enviar (submit) um formulário, a página recarrega. Para controlar o envio
com JavaScript, chamamos evento.preventDefault() logo no início da função:
const formulario = document.querySelector("#meuFormulario");
formulario.addEventListener("submit", function (evento) {
evento.preventDefault(); // impede o recarregamento da página
console.log("Formulário enviado sem recarregar a página!");
});
Atenção: se você esquecer o
preventDefault(), a página recarrega antes do
seu código terminar de rodar — e parecerá que "nada aconteceu".
3. Validando dados do usuário
Antes de usar os dados de um formulário, é fundamental validar. Alguns exemplos comuns:
function validarNome(nome) {
if (nome.trim() === "") {
return "O nome não pode estar vazio.";
}
if (nome.trim().length < 3) {
return "O nome deve ter pelo menos 3 letras.";
}
return null; // null significa "sem erro"
}
console.log(validarNome("")); // "O nome não pode estar vazio."
console.log(validarNome("Al")); // "O nome deve ter pelo menos 3 letras."
console.log(validarNome("Alice")); // null
Dica:
string.trim() remove espaços do início e do fim do texto — muito útil
para não deixar o usuário "enganar" a validação digitando só espaços.
4. Formulário completo: cadastro com validação e mensagens de erro
Preencha o formulário abaixo e clique em enviar. Tente também deixar campos vazios ou inválidos para ver as mensagens de erro.