Evento invalid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since diciembre de 2018.

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

Interfaz Burbujas Cancelable Objetivos Acción por defecto

Event

Sí

Element

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

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

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

input.addEventListener("invalid", logValue);

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