✅ Validación de formulario en tiempo real

👇 Así se ve 👇

👀 Demostración

<form onsubmit="event.preventDefault()">
  Correo electrónico:
  <input type="email" id="email" oninput="validateEmail()">
  <div class="error" id="emailError"></div>

  Contraseña (mínimo 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 correo electrónico inválido";
}

function validatePassword() {
  const pass = document.getElementById("password").value;
  const error = document.getElementById("passwordError");
  error.textContent = pass.length >= 6 ? "" : "La contraseña debe tener al menos 6 caracteres";
}
</script>

✅ Usos y ventajas de esta plantilla

Validación inmediata mientras se escribe
Diseño UX amigable para el usuario
Implementación simple con lógica de validación en JS
Fácil de personalizar incluso para principiantes
Base útil para proyectos reales

🧩 Uso práctico y ampliación de la validación de formularios

La validación en tiempo real permite a los usuarios verificar su entrada mientras escriben, lo que reduce en gran medida el estrés antes de enviar el formulario. Al usar el evento oninput, puedes crear un sistema que evite errores sin necesidad de recargar la página.

Por ejemplo, en validateEmail(), se comprueba la presencia de "@" con email.includes("@"). Aunque esto por sí solo previene errores básicos de formato, combinarlo con regex permite realizar validaciones más precisas.

🔍 Consejos para ampliar la validación

En la verificación de contraseñas, en lugar de solo password.length >= 6, puedes agregar condiciones como /[A-Z]/ o /\d/ usando expresiones regulares para exigir una combinación de letras y números.

Además, usar innerText para los mensajes de error asegura que se ignoren las etiquetas HTML, permitiendo una comunicación clara y segura con el usuario. Mostrar mensajes de error específicos por campo es una técnica clave para mejorar la experiencia de usuario.

Esta plantilla cubre bien lo básico de la validación, así que siéntete libre de ampliarla agregando nuevos campos o ajustando el estilo según tus necesidades.