Evento oninvalid
Definição e uso
O evento oninvalid ocorre quando um elemento <input> submissível é inválido.
Por exemplo, se foi configurado o atributo required e o campo está vazio, o campo de entrada é inválido (o atributo required especifica que o campo de entrada deve ser preenchido antes de submeter o formulário).
Exemplo
Exemplo 1
Se o campo de entrada for inválido, mostre alguns textos:
<input type="text" oninvalid="alert('Você deve preencher o formulário!');" required>
Mais exemplos TIY no rodapé da página.
Sintaxe
No HTML:
<elemento oninvalid="myScript">
No JavaScript:
objeto.oninvalid = function(){myScript};
No JavaScript, use o método addEventListener():
objeto.addEventListener("invalid", myScript);
Notas:O Internet Explorer 8 ou versões anteriores não suportam Método addEventListener().
Detalhes técnicos
| Bubbling: | Não suportado |
|---|---|
| Cancellable: | Suporte |
| Tipo de evento: | Evento |
| Etiquetas HTML suportadas: | <input> |
| Versão do DOM: | Eventos de Nível 3 |
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente o evento.
| Evento | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninvalid | Suporte | 10.0 | Suporte | Suporte | Suporte |
Mais exemplos
Exemplo 2
Se o campo de entrada contiver menos de 6 caracteres, mostre alguns textos:
Nome: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Deve conter 6 ou mais caracteres");
}
</script>
Exemplo 3
Se o campo de entrada contiver um número menor que 2 ou maior que 5, mostre alguns textos:
Number: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Você deve escolher um número entre 2 e 5. Você escolheu: " + this.value);
}
</script>
