El evento invalid se dispara cuando se ha comprobado la validez de un elemento que se puede enviar y no satisface sus restricciones.

Interfaz Event
Burbujas No
Cancelable
Objetivos Element
Acción por defecto Varía (puede prevenir que un formulario sea enviado)

Este evento puede ser útil para desplegar un resumen de los problemas con un formulario al enviarlo. Cuando un formulario se envía, los eventos invalid son disparados en cada control del formulario que es inválido, y entonces en el mismo elemento form. La válidez de los elementos presentados se comprueba antes de enviar al propio <form>, o despúes del método checkValidity() de un elemento o su propio <form> es llamado. No es revisada al perder el foco (on blur).

Ejemplo

Si un formulario es enviado con un valor inválido, los elementos pressentados son revisados, y si un error es encontrado, el evento invalid se disparará en el elemento invalid. En este ejemplo, el valor inválido del input dispara un evento invalid, y el valor inválido es registrado.

HTML

<form action="#">
  <ul>
    <li><label>Enter an integer between 1 and 10: <input type="number" min="0" max="10" required></label></li>
    <li><input type="submit" value="submit"></li>
  </ul>
</form><p id="log"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('invalid', logValue);

function logValue(e) {
  log.textContent += e.srcElement.value;
}

Resultado

(Funciona en la versión en inglés)

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de 'Invalid event' en esta especificación.
Living Standard  
HTML 5.1
La definición de 'Invalid event' en esta especificación.
Recommendation  
HTML5
La definición de 'Invalid event' en esta especificación.
Recommendation  

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: wbamberg, estelle, IsraelFloresDGA
Última actualización por: wbamberg,