✅ Validação de Formulário em Tempo Real

👇 Algo assim 👇

👀 Demonstração

<form onsubmit="event.preventDefault()">
  Endereço de e-mail:
  <input type="email" id="email" oninput="validateEmail()">
  <div class="error" id="emailError"></div>

  Senha (mínimo de 6 caracteres):
  <input type="password" id="password" oninput="validatePassword()">
  <div class="error" id="passwordError"></div>

  <button type="submit">Enviar</button>
</form>

<style>
  .error {
    color: red;
    font-size: 0.9em;
    margin-bottom: 1em;
  }
</style>

<script>
function validateEmail() {
  const email = document.getElementById("email").value;
  const error = document.getElementById("emailError");
  error.textContent = email.includes("@") ? "" : "Formato de e-mail inválido";
}

function validatePassword() {
  const pass = document.getElementById("password").value;
  const error = document.getElementById("passwordError");
  error.textContent = pass.length >= 6 ? "" : "A senha deve ter no mínimo 6 caracteres";
}
</script>

✅ Usos e Vantagens deste Modelo

Validação imediata durante a digitação
UX amigável para o usuário
Lógica de validação fácil com JavaScript
Estrutura simples para iniciantes
Pronto para uso em projetos reais

🧩 Uso prático e expansão da validação de formulários

A validação em tempo real permite que os usuários verifiquem suas entradas enquanto digitam, reduzindo significativamente o estresse antes do envio. Usando o evento oninput, é possível criar um sistema que evita erros sem recarregar a página.

Por exemplo, em validateEmail(), verifica-se se há um "@" usando email.includes("@"). Embora isso já ajude a evitar erros simples de digitação, adicionar validações mais precisas com regex torna o sistema ainda mais robusto.

🔍 Dicas para ampliar a validação

Para senhas, além de password.length >= 6, é possível usar expressões regulares como /[A-Z]/ ou /\d/ para exigir combinações de letras maiúsculas e números.

Além disso, usar innerText para mensagens de erro evita a interpretação de tags HTML, proporcionando uma comunicação clara e segura ao usuário. Exibir mensagens específicas por campo é uma prática essencial para melhorar a experiência do usuário.

Este modelo cobre bem os fundamentos da validação, então sinta-se à vontade para expandi-lo com novos campos ou personalizá-lo conforme necessário.