en evento no válido
Ejemplo
Alerte algún texto si un campo de entrada no es válido:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El evento oninvalid ocurre cuando un elemento <input> que se puede enviar no es válido.
Por ejemplo, el campo de entrada no es válido si se establece el atributo requerido y el campo está vacío (el atributo requerido especifica que el campo de entrada debe completarse antes de enviar el formulario).
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el evento.
Event | |||||
---|---|---|---|---|---|
oninvalid | Yes | 10.0 | Yes | Yes | Yes |
Sintaxis
En HTML:
<element oninvalid="myScript">
En JavaScript:
object.oninvalid = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("invalid", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
Burbujas: | No |
---|---|
Cancelable: | sí |
Tipo de evento: | Evento |
Etiquetas HTML compatibles: | <entrada> |
Versión DOM: | Eventos de nivel 3 |
Más ejemplos
Ejemplo
Alerte algún texto si un campo de entrada contiene menos de 6 caracteres:
Name: <input type="text" id="myInput" name="fname" pattern=".{6,}"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Must contain 6 or more characters");
}
</script>
Ejemplo
Alerte algún texto si un campo de entrada contiene un número menor que 2 o mayor que 5:
Number: <input type="number" id="myInput" name="quantity" min="2" max="5"
required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("You must pick a number between 2 and 5. You chose: " + this.value);
}
</script>
páginas relacionadas
Tutorial de JavaScript: formularios de JavaScript