Συμβάν oninvalid
Ορισμός και χρήση
Ο επέμβαση oninvalid συμβαίνει όταν το στοιχείο input είναι άκυρο.
Αν έχει ρυθμιστεί η ιδιότητα required και το πεδίο είναι κενό, το πεδίο εισαγωγής είναι άκυρο (η ιδιότητα required καθορίζει ότι το πεδίο εισαγωγής πρέπει να συμπληρωθεί πριν από την υποβολή της φόρμας).
Instance
Example 1
If the input field is invalid, prompt some text:
<input type="text" oninvalid="alert('You must fill out the form!');" required>
More TIY examples are at the bottom of the page.
Syntax
In HTML:
<element oninvalid="myScript">
In JavaScript:
object.oninvalid = function(){myScript};
In JavaScript, use the addEventListener() method:
object.addEventListener("invalid", myScript);
Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.
Technical details
| Bubble: | Not supported |
|---|---|
| Cancelable: | Support |
| Event type: | Event |
| Supported HTML tags: | <input> |
| DOM version: | Level 3 Events |
Browser support
The numbers in the table indicate the first browser version that fully supports the event.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninvalid | Support | 10.0 | Support | Support | Support |
More examples
Example 2
If the input field contains fewer than 6 characters, prompt some text:
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>
Example 3
If the input field contains a number less than 2 or greater than 5, prompt some text:
Number: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Δε πρέπει να επιλέξετε έναν αριθμό μεταξύ 2 και 5. Επιλέξατε: " + this.value);
}
</script>
