em evento inválido
Exemplo
Alerte algum texto se um campo de entrada for inválido:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O evento oninvalid ocorre quando um elemento <input> submittable é inválido.
Por exemplo, o campo de entrada é inválido se o atributo obrigatório estiver definido e o campo estiver vazio (o atributo obrigatório especifica que o campo de entrada deve ser preenchido antes de enviar o formulário).
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao evento.
Event | |||||
---|---|---|---|---|---|
oninvalid | Yes | 10.0 | Yes | Yes | Yes |
Sintaxe
Em HTML:
<element oninvalid="myScript">
Em JavaScript:
object.oninvalid = function(){myScript};
Em JavaScript, usando o método addEventListener():
object.addEventListener("invalid", myScript);
Observação: o método addEventListener() não é compatível com o Internet Explorer 8 e versões anteriores.
Detalhes técnicos
Bolhas: | Não |
---|---|
Cancelável: | sim |
Tipo de evento: | Evento |
Tags HTML suportadas: | <entrada> |
Versão DOM: | Eventos de Nível 3 |
Mais exemplos
Exemplo
Alerte algum texto se um campo de entrada contiver 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>
Exemplo
Alerte algum texto se um campo de entrada contiver um número menor que 2 ou maior 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 JavaScript: Formulários JavaScript