El Atributo ONINVALID

El atributo oninvalid es un evento de JavaScript que se activa cuando un elemento de formulario falla en la validación HTML5 (ej: campos required vacíos, valores fuera de rango, o patrones no coincidentes). Es clave para personalizar mensajes de error y mejorar la experiencia del usuario en formularios.

¿Dónde se aplica?

Funciona en elementos de formulario con validación HTML5:

• <input> (tipos: text, email, number, password, etc.).

• <textarea>.

• <select>.

Validaciones comunes:

• required: Campo obligatorio.

• pattern: Expresión regular (ej: [A-Za-z]{3}).

• min/max: Valores numéricos/rangos.

• maxlength/minlength: Longitud del texto.

Sintaxis básica

Como atributo HTML (inline):

<input type="text" required 
  oninvalid="this.setCustomValidity('¡Este campo es obligatorio!')">

Con JavaScript (recomendado para mayor control):

const input = document.getElementById("miInput");
input.addEventListener("invalid", (e) => {
  e.target.setCustomValidity("Mensaje personalizado");
});

Ejemplos prácticos

Ejemplo 1: Mensaje de error personalizado

<input type="email" required placeholder="Correo electrónico"
  oninvalid="this.setCustomValidity('Ingresa un correo válido')"
  oninput="this.setCustomValidity('')"> <!-- Limpiar mensaje al corregir -->

Ejemplo 2: Validación con patrón regex

<input type="text" pattern="[A-Za-z]{3}" title="3 letras (sin números)"
  oninvalid="this.setCustomValidity('Mínimo 3 letras')">

Ejemplo 3: Validación de contraseña con feedback visual

<input 
  type="password" 
  id="password" 
  required 
  minlength="8"
  oninvalid="mostrarErrorContraseña()"
>
<div id="error-password" style="color: red; display: none;">
  La contraseña debe tener al menos 8 caracteres.
</div>

<script>
  function mostrarErrorContraseña() {
    document.getElementById("error-password").style.display = "block";
  }

  // Limpiar error al corregir
  document.getElementById("password").addEventListener("input", () => {
    document.getElementById("error-password").style.display = "none";
  });
</script>

Diferencias clave entre eventos

Evento	Descripción
oninvalid	Cuando falla la validación HTML5
oninput	Al modificar el valor del campo
onchange	Al confirmar cambios (pierde foco)

Mejores prácticas

Usar setCustomValidity('') para limpiar mensajes:

Siempre restablece el mensaje al corregir el error:

<input oninvalid="this.setCustomValidity('Error')"
  oninput="this.setCustomValidity('')">

Combinar con CSS para feedback visual:

Aprovecha la pseudoclase :invalid:

input:invalid {
  border: 2px solid #ff4444;
}

Validación del servidor:

No confíes solo en la validación del cliente. Siempre valida en el backend.

Casos avanzados

Validación de formulario multi-campo:

<form id="formulario">
  <input type="email" id="email" required>
  <input type="password" id="password" required>
  <button>Enviar</button>
</form>

<script>
  document.getElementById("formulario").addEventListener("invalid", (e) => {
    e.preventDefault();
    alert(`Error en: ${e.target.id}`);
  }, true); <!-- Usar captura para eventos en hijos -->
</script>

Validación personalizada con lógica:

document.getElementById("edad").addEventListener("invalid", (e) => {
  if (e.target.validity.rangeUnderflow) {
    e.target.setCustomValidity("Edad mínima: 18 años");
  } else if (e.target.validity.rangeOverflow) {
    e.target.setCustomValidity("Edad máxima: 100 años");
  }
});

Errores comunes

<!-- MAL: No limpiar el mensaje personalizado -->
<input 
  oninvalid="this.setCustomValidity('Error')" 
  <!-- ¡El mensaje persiste incluso después de corregir! -->
>

<!-- CONFUSIÓN: Usar oninvalid sin validación HTML5 -->
<input type="text" oninvalid="..."> <!-- No se activa sin required/pattern -->

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ v6+
Safari	✅ v10+
Edge	✅ v18+
Móviles	✅ Sí (iOS/Android)

Conclusión

El atributo oninvalid es esencial para:

• Personalizar mensajes de error de formularios.
• Mejorar la experiencia de usuario con feedback claro.
• Controlar la validación del lado del cliente de manera flexible.

Recuerda:

1. Combínalo con CSS para resaltar campos inválidos visualmente.
2. Limpia los mensajes con setCustomValidity('') en oninput.
3. Nunca reemplaces la validación del servidor.

¡Ahora puedes crear formularios más amigables y profesionales!