onongeldige gebeurtenis
Voorbeeld
Waarschuw wat tekst als een invoerveld ongeldig is:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De gebeurtenis oninvalid vindt plaats wanneer een inzendbaar <input>-element ongeldig is.
Het invoerveld is bijvoorbeeld ongeldig als het vereiste kenmerk is ingesteld en het veld leeg is (het vereiste kenmerk geeft aan dat het invoerveld moet worden ingevuld voordat het formulier wordt verzonden).
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de gebeurtenis volledig ondersteunt.
Event | |||||
---|---|---|---|---|---|
oninvalid | Yes | 10.0 | Yes | Yes | Yes |
Syntaxis
In HTML:
<element oninvalid="myScript">
In javascript:
object.oninvalid = function(){myScript};
In JavaScript, met behulp van de addEventListener()-methode:
object.addEventListener("invalid", myScript);
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
bubbels: | Nee |
---|---|
Annuleerbaar: | Ja |
Evenementtype: | Evenement |
Ondersteunde HTML-tags: | <invoer> |
DOM-versie: | Niveau 3 Evenementen |
Meer voorbeelden
Voorbeeld
Waarschuw wat tekst als een invoerveld minder dan 6 tekens bevat:
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>
Voorbeeld
Waarschuw wat tekst als een invoerveld een getal bevat dat kleiner is dan 2 of groter dan 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>
Gerelateerde pagina's
JavaScript-zelfstudie: JavaScript-formulieren