Como Validar Formulários com JavaScript
Aprenda a validar entradas de formulário usando JavaScript. Veja exemplos de verificação de campos obrigatórios, formatos de e-mail e outros critérios de validação.
Como Validar Formulários com JavaScript
A validação de formulários é uma parte essencial do desenvolvimento web, garantindo que os dados enviados pelos usuários sejam completos e estejam no formato correto. Com JavaScript, você pode realizar a validação de formulários diretamente no navegador, proporcionando uma melhor experiência ao usuário. Neste post, vamos explorar como validar entradas de formulário usando JavaScript, com exemplos de verificação de campos obrigatórios, formatos de e-mail e outros critérios de validação.
Verificando Campos Obrigatórios
A primeira etapa da validação de formulários é garantir que os campos obrigatórios sejam preenchidos. Vamos começar com um exemplo básico de formulário HTML:
<form id="meuForm">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>
Agora, vamos adicionar JavaScript para verificar se os campos estão preenchidos:
document.getElementById('meuForm').addEventListener('submit', function(event) {
let nome = document.getElementById('nome').value;
let email = document.getElementById('email').value;
let mensagemErro = '';
if (!nome) {
mensagemErro += 'O campo nome é obrigatório.\\\\n';
}
if (!email) {
mensagemErro += 'O campo email é obrigatório.\\\\n';
}
if (mensagemErro) {
alert(mensagemErro);
event.preventDefault(); // Impede o envio do formulário
}
});
Validando Formato de E-mail
Para validar se um e-mail está no formato correto, podemos usar uma expressão regular (regex). Vamos adicionar essa verificação ao nosso exemplo:
function validarEmail(email) {
const regex = /^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/;
return regex.test(email);
}
document.getElementById('meuForm').addEventListener('submit', function(event) {
let nome = document.getElementById('nome').value;
let email = document.getElementById('email').value;
let mensagemErro = '';
if (!nome) {
mensagemErro += 'O campo nome é obrigatório.\\\\n';
}
if (!email) {
mensagemErro += 'O campo email é obrigatório.\\\\n';
} else if (!validarEmail(email)) {
mensagemErro += 'Por favor, insira um e-mail válido.\\\\n';
}
if (mensagemErro) {
alert(mensagemErro);
event.preventDefault(); // Impede o envio do formulário
}
});
Verificando Comprimento de Campos
Podemos também verificar se um campo tem um comprimento mínimo ou máximo específico. Vamos adicionar essa verificação ao campo de nome:
document.getElementById('meuForm').addEventListener('submit', function(event) {
let nome = document.getElementById('nome').value;
let email = document.getElementById('email').value;
let mensagemErro = '';
if (!nome) {
mensagemErro += 'O campo nome é obrigatório.\\\\n';
} else if (nome.length < 3) {
mensagemErro += 'O nome deve ter pelo menos 3 caracteres.\\\\n';
}
if (!email) {
mensagemErro += 'O campo email é obrigatório.\\\\n';
} else if (!validarEmail(email)) {
mensagemErro += 'Por favor, insira um e-mail válido.\\\\n';
}
if (mensagemErro) {
alert(mensagemErro);
event.preventDefault(); // Impede o envio do formulário
}
});
Validando Senhas
Vamos adicionar um campo de senha e verificar se a senha tem pelo menos 8 caracteres e inclui pelo menos um número:
<form id="meuForm">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha">
<button type="submit">Enviar</button>
</form>
function validarSenha(senha) {
const regex = /^(?=.*\\\\d).{8,}$/;
return regex.test(senha);
}
document.getElementById('meuForm').addEventListener('submit', function(event) {
let nome = document.getElementById('nome').value;
let email = document.getElementById('email').value;
let senha = document.getElementById('senha').value;
let mensagemErro = '';
if (!nome) {
mensagemErro += 'O campo nome é obrigatório.\\\\n';
} else if (nome.length < 3) {
mensagemErro += 'O nome deve ter pelo menos 3 caracteres.\\\\n';
}
if (!email) {
mensagemErro += 'O campo email é obrigatório.\\\\n';
} else if (!validarEmail(email)) {
mensagemErro += 'Por favor, insira um e-mail válido.\\\\n';
}
if (!senha) {
mensagemErro += 'O campo senha é obrigatório.\\\\n';
} else if (!validarSenha(senha)) {
mensagemErro += 'A senha deve ter pelo menos 8 caracteres e incluir pelo menos um número.\\\\n';
}
if (mensagemErro) {
alert(mensagemErro);
event.preventDefault(); // Impede o envio do formulário
}
});
Conclusão
A validação de formulários é essencial para garantir que os dados enviados sejam precisos e completos. Com JavaScript, você pode facilmente adicionar verificação de campos obrigatórios, formatos de e-mail, comprimentos de campos e requisitos de senha. Pratique essas técnicas para melhorar a experiência do usuário e a qualidade dos dados em seus projetos web.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com a WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
