Evento invalid

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	Sí
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).

<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>

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

input.addEventListener("invalid", logValue);

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