Como Fazer Validação de Formulários com JavaScript e HTML: Guia Prático

Entenda como funciona a criação e validação de formulários com JavaScript e HTML, com exemplos práticos e cada parte do código explicada!

Validar formulários é essencial para garantir que os dados enviados pelos usuários sejam corretos e seguros. Seja para evitar campos vazios ou aplicar regras específicas, como o tamanho de uma senha, a validação melhora a experiência do usuário e a confiabilidade do sistema.

Bora aprender?

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é validação de formulários e por que ela é importante?

Validação de formulários é o processo de verificar se os dados inseridos pelo usuário atendem a critérios definidos, como não estar vazio ou seguir um formato específico.

Isso evita erros, melhora a segurança e garante que o sistema receba informações úteis. Por exemplo, um formulário de login não deve ser enviado com campos vazios ou com uma senha muito curta.

Usando HTML, podemos fazer validações básicas, enquanto o JavaScript permite regras mais complexas e personalizadas. Vamos explorar como criar e validar um formulário passo a passo.

Como criar um formulário simples em HTML?

Pra começar, precisamos de um formulário HTML básico. Ele pode incluir campos para nome e senha, com um botão para envio.

Aqui está a estrutura:

• Tag <form>: Envolve o formulário.
• Label: Descreve o campo e melhora a acessibilidade, conectando-se ao input pelo atributo for.
• Input: Campos de texto (type="text") ou senha (type="password"), com id e name.
• Button: Botão de envio com type="submit".

Exemplo prático: Um formulário com dois campos (nome e senha) e um botão de envio:

Por padrão, ao clicar em “Enviar”, o formulário envia os dados para a URL, exibindo-os como parâmetros (ex.: ?name=Diego&password=abc). Vamos agora validar esses dados.

Como fazer validação básica com HTML?

O HTML oferece o atributo required para garantir que um campo não seja enviado vazio. É uma solução simples, sem necessidade de JavaScript.

• Atributo required: Adicione required ao input para obrigar o preenchimento.
• Pattern: Use o atributo pattern com expressões regulares (regex) para definir formatos específicos.

Se o usuário tentar enviar sem preencher ou com uma senha fora do padrão, o navegador exibe uma mensagem de erro automaticamente.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Como vincular JavaScript ao formulário?

Para validações mais avançadas, usamos JavaScript. Primeiro, precisamos conectar o arquivo JavaScript ao HTML e selecionar os elementos do formulário.

• Conectar o JavaScript: Adicione <script src="script.js"> ao final do <body> ou use defer no <head>.
• Selecionar elementos: Use document.querySelector para capturar o formulário e os inputs pelo id ou tag.

Exemplo prático: Selecionando o formulário e os campos:

const form = document.querySelector('form');
const nome = document.querySelector('#name');
const senha = document.querySelector('#password');

Coloque o script no final do HTML para garantir que os elementos já estejam carregados antes de acessá-los.

Como capturar o envio do formulário com JavaScript?

Para validar antes de enviar, usamos um event listener no evento submit do formulário. Isso permite interceptar o envio e aplicar regras.

• Adicionar event listener: Use form.addEventListener('submit', (e) => {...}).
• Prevenir envio padrão: Chame e.preventDefault() para evitar que o formulário seja enviado antes da validação.

Exemplo prático: Impedindo o envio padrão:

form.addEventListener('submit', (e) => { e.preventDefault();
console.log('Formulário interceptado!'); }); 

Como validar campos com JavaScript?

Com JavaScript, podemos verificar se os campos estão vazios ou seguir regras específicas, como o tamanho da senha. Vamos criar uma lógica para impedir o envio se o nome ou a senha estiverem vazios ou se a senha tiver menos de 4 ou mais de 10 caracteres.

• Verificar campos vazios: Use !nome.value para checar se o campo está vazio.
• Validar tamanho da senha: Use senha.value.length para contar caracteres.
• Controlar envio: Use uma variável booleana para decidir se o formulário pode ser enviado.

Exemplo prático: Validação completa:

form.addEventListener('submit', (e) => { e.preventDefault();
let enviarForm = true;
if (!nome.value) { console.log('Nome está vazio');
enviarForm = false; } if (!senha.value) { console.log('Senha está vazia');
enviarForm = false; } if (senha.value.length < 4 || senha.value.length > 10) { console.log('Senha deve ter entre 4 e 10 caracteres');
enviarForm = false; } if (enviarForm) { console.log('Formulário válido, enviando...');
// form.submit(); }); 

Esse código verifica os campos e só permite o envio se todas as condições forem atendidas.

Como melhorar a validação com regex no HTML?

O atributo pattern no HTML usa expressões regulares (regex) para validar formatos. Por exemplo, para aceitar senhas de 4 a 10 caracteres, usamos pattern=".{4,10}". Combinado com uma mensagem visual, isso melhora a experiência do usuário.

• Sintaxe do pattern: .{4,10} significa “qualquer caractere, de 4 a 10 vezes”.
• Mensagem visual: Adicione um parágrafo explicando a regra.

Exemplo prático: Formulário com regex e mensagem:

<input type="password" id="password" name="password" required pattern=".{4,10}">
<p>Senha deve ter entre 4 e 10 caracteres.</p>

Conclusão

Validar formulários com HTML e JavaScript é uma habilidade essencial para desenvolvedores web. Com o HTML, você pode usar required e pattern para validações simples, enquanto o JavaScript permite criar regras personalizadas, como verificar campos vazios ou o tamanho de uma senha.

Comece com um formulário básico, adicione validações simples e, aos poucos, explore regex e lógicas mais complexas. Pratique essas técnicas para criar formulários mais seguros e amigáveis!

Caso prefira esse conteúdo no formato de vídeo-aula, confira os vídeos abaixo ou acesse o nosso canal do YouTube!